知识库

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;">
    三次方贝塞尔曲线由四个点定义，两个锚点和两个控制点，可以向两个方向弯曲。 
  </h3>
  <img src="./imgs/bezier-curve-to.png" alt="">

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

    canvas.style.background = '#ddd'

    context.moveTo(0, 0)
    /**
     * 新增三次贝塞尔曲线
     * 
     * @param {number} cp1x 第一个控制点的 x 坐标
     * @param {number} cp1y 第一个控制点的 y 坐标
     * @param {number} cp2y 第二个控制点的 x 坐标
     * @param {number} cp2y 第二个控制点的 y 坐标
     * @param {number} x 终点的 x 坐标
     * @param {number} y 终点的 y 坐标
     */
    // 锚点会与当前路径的最后一个路径点相连
    context.bezierCurveTo(50, 100, 180, 10, 20, 10)
    context.stroke()
  </script>
</body>

</html>