如何连接多个贝塞尔曲线？

Question

我想用bezierCurveTo()画一个图。据我所知，只能用1 bezierCurveTo()设置3个锚点。如果我使用它们中的多个，则线条会变得不平滑。我该如何解决？

<canvas id="myCanvas" width="600" height="150" style="border:1px solid #d3d3d3;"></canvas>

<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  context.beginPath();
  context.moveTo(0, 150);
  context.bezierCurveTo(100, 0, 200, 100, 300, 20);
  context.bezierCurveTo(400, 0, 500, 100, 600, 20);
  
  context.strokeStyle = 'blue';
  context.stroke();
</script> 

Answer 1

您应该先绘制到最后一点，然后再绘制贝塞尔曲线这是示例代码

<canvas id="myCanvas" width="600" height="150"></canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    context.strokeStyle = 'blue';

    function drawCurve(x, y, curves) {
        context.beginPath();
        context.moveTo(x, y);
        for (i = 0; i < curves.length; i++) {
            c = curves[i]
            context.bezierCurveTo(c[0], c[1], c[2], c[3], c[4], c[5]);
            context.moveTo(c[4], c[5]);
            context.stroke();
        }

    }

    context.strokeStyle = 'blue';
    drawCurve(0, 150, [
        [100, 0, 200, 100, 300, 50],
        [400, 0, 500, 100, 600, 20]
    ]);

    context.strokeStyle = 'red';
    drawCurve(0, 10, [
        [100, 0, 180, 90, 280, 50],
        [400, 0, 400, 80, 600, 120]
    ]);
</script>