HTML5 Canvas，沿路径等距点

Question

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

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

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

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

编辑：应该也适用于 IE

Answer 1

  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。

HTML5 Canvas，沿路径等距点

HTML5 Canvas, Equally Spaced Dots Following a Path

html

javascript

bezier

canvas