Canvas动态绘制连续曲线：lineLength超50时是否应使用bezierCurveTo？

我正在动态绘制一条连续的曲线，效果如下图所示。请问当lineLength超过50时，我是否应该使用bezierCurveTo方法？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Curve Line</title>
  </head>
  <body>
    <canvas id="curve-line" height="600" width="800"></canvas>
    <script>
      const canvas = document.getElementById("curve-line");
      const ctx = canvas.getContext("2d");
      let lineLength = 0;
      let lineY = canvas.height / 2;

      // 每100毫秒更新线条长度和高度
      setInterval(() => {
        // 将线条长度增加5
        lineLength += 5;

         if(lineLength > 50)lineY -= 1;

        // 保持线条高度在画布范围内
        if (lineY < 0) {
          lineY = 0;
        } else if (lineY > canvas.height) {
          lineY = canvas.height;
        }

        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 开始新路径
        ctx.beginPath();

        // 将起始点移动到画布左侧
        ctx.moveTo(0, canvas.height / 2);

        // 绘制线条到当前长度和高度对应的位置
        ctx.lineTo(lineLength, lineY);

        // 设置线条颜色为红色
        ctx.strokeStyle = "red";

        // 设置线条宽度为2像素
        ctx.lineWidth = 2;

        // 描边路径
        ctx.stroke();
      }, 100);
    </script>
  </body>
</html>

是否要用bezierCurveTo完全取决于你想要的最终曲线效果：

• 如果你只是想让线条从水平状态平滑过渡到向下倾斜，不需要用贝塞尔曲线。当前代码中lineLength>50后lineY每次减1，画出来的是连续折线，只要调整lineY的变化逻辑（比如缩小每次的变化幅度，或者用缓动公式让过渡更自然），用lineTo就能实现流畅的连续线条。
• 如果你需要的是带有明显弧度的平滑曲线（比如示例图呈现的弯曲效果），那bezierCurveTo是合适的选择。你可以在lineLength超过50后，用贝塞尔曲线连接起始点、控制点和当前终点，让线条呈现出弧形过渡。

这里给个简单的改造示例，当lineLength>50时改用二次贝塞尔曲线：

ctx.beginPath();
ctx.moveTo(0, canvas.height / 2);
if (lineLength <= 50) {
  ctx.lineTo(lineLength, lineY);
} else {
  // 把控制点设为(50, canvas.height/2)，让曲线从水平自然过渡到向下
  ctx.quadraticCurveTo(50, canvas.height/2, lineLength, lineY);
}
ctx.stroke();

总结：要是只想让折线变平滑，调整Y轴变化逻辑即可；要是需要弧形曲线，再考虑用bezierCurveTo（或更简单的二次贝塞尔quadraticCurveTo）。

内容的提问来源于stack exchange，提问作者TheSmile