如何在画布上绘制具有重复形状/标记的线？

Question

我正在寻找一种在<canvas>元素中与标记对齐的方法，例如下面的图片。

在SVG中，我们可以感谢标记，但是我还没有找到使用画布进行类似操作的方法。 我知道我们可以借助createPattern函数在画布中创建模式，但我怀疑它是否可以解决问题。

编辑 ：这不是此问题的重复，因为我正在寻找一种在路径上重复形状/标记的方法。 这与将标记放置在特定的给定点无关。

正如我在下面的评论中所述，我发现了svg-path-properties对于我的解决方案而言几乎是完美的。

Answer 1

不幸的是，在canvas API中，没有原生的方法可以向笔画添加标记。 即使我们能够将strokeStyle设置为CanvasPattern，也无法使该模式遵循路径的方向。

这意味着您必须自己计算标记的方向和位置...
对于这一点，你可以参考很多帖子，像这样一个在评论由Tomas安图内斯建议。

但是，要制作您显示给我们的确切三角形，我得到了一个非数学的技巧，虽然效果不佳，但无论如何我还是想分享。

笔划可以具有破折号数组，这会在笔划中产生间隙。
通过多次偏移此破折号数组并减小笔划的lineWidth ，我们可以对这些箭头形状进行排序 ：

 var ctx = c.getContext('2d'); // our default path ctx.beginPath(); ctx.moveTo(50, 20); ctx.bezierCurveTo(230, 30, 150, 60, 50, 100); ctx.bezierCurveTo(250, 50, 150, 60, 150, 150); ctx.stroke(); // the hack for (var i = 0; i < 9; i += .5) { // set an dasharray of 1px visible, then 40 invisible ctx.setLineDash([1, 49]); // offset the dash-array by one px ctx.lineDashOffset = i; // reduce the width of our stroke ctx.lineWidth = i; ctx.stroke(); } 

 <canvas id="c"></canvas> 

但是此方法的主要警告（ 除了要求重画相同的路径20次之外 ）是它会真正遵循该路径，并且在角度上可能不再完全像我们的三角形。

 var ctx = c.getContext('2d'); // our default path ctx.beginPath(); ctx.moveTo(50, 20); ctx.bezierCurveTo(230, 30, 150, 60, 50, 100); ctx.stroke(); // the hack for (var i = 0; i < 9; i += .5) { // set an dasharray of 1px visible, then 20 invisible ctx.setLineDash([1, 14]); // offset the dash-array by one px ctx.lineDashOffset = i; // reduce the width of our stroke ctx.lineWidth = i*2; ctx.stroke(); } 

 <canvas id="c"></canvas>