知识库

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/quadratic-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} cpx 控制点的 x 坐标
     * @param {number} cpy 控制点的 y 坐标
     * @param {number} x 终点的 x 坐标
     * @param {number} y 终点的 y 坐标
     */
    // 锚点会与当前路径的最后一个路径点相连
    context.quadraticCurveTo(230, 30, 50, 100)
    context.stroke()
  </script>
</body>

</html>