知识库

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;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <canvas id="canvas2"></canvas>
  <img src="./imgs/arc-and-arc-to.png" alt="">

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

    canvas.style.background = '#ddd'

    /**
     * arc 绘制圆弧路径 
     * 
     * @param {number} x 圆心的 x 坐标
     * @param {number} y 圆心的 y 坐标
     * @param {number} radius 半径
     * @param {number} startAngle 起始角度
     * @param {number} endAngle 结束角度
     * @param {boolean=false} anticlockwise 是否逆时针方向绘制
     */
    context.beginPath()
    // 加入只包含一个点的子路径
    context.moveTo(10, 10)
    // 不清除子路径，会将子路径的终点和圆弧的起点连接起来
    context.beginPath()
    context.arc(150, 75, 50, 0, Math.PI)
    context.stroke()

    const canvas2 = document.querySelector('#canvas2')
    const context2 = canvas2.getContext('2d')

    canvas2.style.background = '#eee'
    
    context2.setLineDash([])
    context2.beginPath();
    context2.moveTo(150, 20);
    /**
     * arcTo 绘制圆弧路径，使用当前的描点 (前一个 moveTo 或 lineTo 等函数的止点)。
     * 根据当前描点与给定的控制点 1 连接的直线，和控制点 1 与控制点 2 连接的直线，
     * 作为使用指定半径的圆的切线，画出两条切线之间的弧线路径。
     * 
     * @param {number} x1 第一个控制点的 x 坐标
     * @param {number} y1 第一个控制点的 y 坐标
     * @param {number} x2 第二个控制点的 x 坐标
     * @param {number} y2 第二个控制点的 y 坐标
     * @param {number} radius 半径
     */
    context2.arcTo(150, 100, 50, 20, 30);
    context2.stroke();

    context2.fillStyle = 'blue';
    // base point
    context2.fillRect(150, 20, 10, 10);

    context2.fillStyle = 'red';
    // control point one
    context2.fillRect(150, 100, 10, 10);
    // control point two
    context2.fillRect(50, 20, 10, 10);
    //
    context2.setLineDash([5, 5])
    context2.moveTo(150, 20);
    context2.lineTo(150, 100);
    context2.lineTo(50, 20);
    context2.stroke();
    context2.beginPath();
    context2.arc(120, 38, 30, 0, 2 * Math.PI);
    context2.stroke();
  </script>
</body>

</html>