html - 如何使用 HTML5 绘制弯曲的虚线箭头并制作动画

Question

我的目标是在 html5 Canvas 上创建一个像这样的弯曲箭头:

我找到了一些关于如何画线的资源，但它们似乎都不起作用。我还找到了一个相关的 stackoverflow post .

此外，是否可以在悬停时为其设置动画以展开箭头，也许可以使用弹性效果？

Answer 1

Raphael 和 canvas 在用纸笔画线时都有一些局限性。我发现模拟这种情况的最佳方法是迭代地将 1 像素路径转换为目标路径，如这个 fiddle 所示:http://jsfiddle.net/zPRha/31/通过一些工作，您可以计算路径上最后两点之间的角度，并变换/旋转箭头路径以匹配绘制的线。这不是一个理想的解决方案，但它会起作用。

Raphael 的内置悬停支持使缩放/取消缩放变得非常容易。我的理解是，使用原生 Canvas 进行此类处理会更加迟钝，但我确信某些 Canvas 库已经自动消除了这种担忧。

这里是一个更新的 fiddle ，带有对箭头的可选支持:http://jsfiddle.net/kevindivdbyzero/JPqXF/