javascript - HTML5 Canvas，沿着路径的等距点

Question

这个问题已经有答案了:

Draw HTML5/Javascript Canvas Path in Time (3 个回答)

已关闭 7 年前。

我是第一次尝试 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。