javascript - 如何连接多条贝塞尔曲线？

Question

我想使用 bezierCurveTo() 绘制图表。据我所知，只能用1个bezierCurveTo()设置3个 anchor 。如果我使用多个，我会得到一条不平滑的线。我该如何解决这个问题？

<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

这是一个不平凡的问题。这取决于您想要实现的平滑程度(只需连接切线，或使连接点的曲线半径相同)。最简单的方法如图所示([A3-X]/[X-B2] = [A3-A4]/[B1-B2]；从 A4 开始 [A3-X] 向量，从 B1 开始 [X-B2] 到获取 A3x 和 B2x anchor )。

但是您也可以看看 D3 Shape module (例如 Catmul Rom 曲线)，它将从它应该经过的点生成贝塞尔样条线。或者看看某处的算法。