HTML5 画布，沿路径等间距的点 [重复]

Question

我是第一次尝试使用 HTML5 Canvas，因为我需要创建一个看起来像这样的弯曲路径：

现在图像显示的是第一种情况，它只是一条由几条贝塞尔曲线组成的实心笔触路径。我想要实现的是使路径以某种方式点缀，然后突出显示路径的某个部分以说明沿路径的进展（这是为了游戏）。

除了对贝塞尔二等分进行数学运算，沿着我数学计算的路径绘制点（我已经阅读了一些似乎展示了如何有效地做到这一点的论文，但这似乎有点矫枉过正），我想知道如果有一些简单的方法可以达到这个效果。谢谢！

编辑：我找到了这个答案，dotted stroke in <canvas>，但它并没有完全解决我想到的贝塞尔曲线更复杂的情况。这个直线版本真的很容易实现:)

编辑：应该也可以在 IE 中使用

Answer 1

https://jsfiddle.net/9m8wo0ef/2/

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

  context.setLineDash([5, 15]);

  context.beginPath();
  context.moveTo(100, 20);

  // bezier curve
  context.bezierCurveTo(290, -40, 300, 200, 400, 150);

  context.lineWidth = 5;
  context.strokeStyle = 'blue';
  context.stroke();

  // second half of curve
  context.beginPath();
  context.strokeStyle="#DDDDFF";
  context.bezierCurveTo(400, 150, 500, 120, 450, 20);
  context.stroke();

注意：第二条曲线（浅色路径）必须从第一条路径停止的地方开始 - 在本例中，即 400、150。