知识库

html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <h3 style="width: 70vw;">
    当你在整数位置（如 1 位置）绘制 1px 的线段，会将 [0.5, 1.5] 位置填充，由于在一个像素
    范围内绘制半个像素是不可能的，所以左右两边都会被扩展为 1px，实际会将[0, 2]位置填充，
    画出 2px 的线段。
  </h3>
  <img src="./imgs/pixel-boundary.png" alt="">

  <script>
    const canvas = document.querySelector('#canvas')
    const context = canvas.getContext('2d')

    canvas.style.background = '#ddd'

    // Canvas绘图环境提供了两个创建线性路径的方法：moveTo() 和 lineTo()，要使线段出现，
    // 必须在创建路径后调用 stroke() 方法。

    context.lineWidth = 1
    context.beginPath()
    /**
     * moveTo 将一个新的子路径的起始点移动到 (x，y) 坐标的方法。
     * 
     * @param {number} x 点的x轴坐标
     * @param {number} y 点的y轴坐标
     */
    // 将路径起点移动到(50, 40)
    context.moveTo(50, 40)
    /**
     * lineTo 使用直线连接子路径的终点到 x，y 坐标的方法（并不会真正地绘制）。
     * 
     * @param {number} x 直线终点的x轴坐标
     * @param {number} y 直线终点的y轴坐标
     */
    // 将路径终点移动到(450, 40)
    context.lineTo(200, 40)
    // 真正绘制
    context.stroke()
    // 清除子路经
    context.beginPath()
    context.moveTo(50, 70)
    context.lineTo(200, 70)
    context.stroke()
  </script>
</body>

</html>