HTML5画布，沿着路径的等间隔点

Question

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

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

除了做bezier二分的数学之外，沿着我在数学上计算的路径绘制点（我已经阅读了一些似乎有效地展示了如何做到这一点的论文，但这似乎是一种矫枉过正），我想知道是否有一些简单的方法来实现这种效果。谢谢！

编辑：我找到了这个答案，dotted stroke in <canvas>但它并没有完全解决我在Bezier曲线中考虑的更复杂的情况。这个的直线版本很容易实现：）

编辑：也应该在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。