如何使用HTML5绘制弯曲的虚线箭头并为其设置动画

Question

我的目标是在html5画布上创建一个像这样的弯曲箭头：

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

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

Answer 1

拉斐尔和画布在纸笔画风格上都有一些限制。我发现模拟这种事情的最好方法是迭代地将1像素路径转换为目标路径，就像在这个小提琴中一样：http://jsfiddle.net/zPRha/31/通过一点点工作，你可以计算出最后两个之间的角度沿路径指向并转换/旋转箭头路径以匹配绘制的线条。这不是一个理想的解决方案，但它会起作用。

拉斐尔内置的悬停支持使缩放/解放非常容易。我的理解是，这种处理在本地使用canvas会更加迟钝，不过我确信一些画布库已经自动解决了这个问题。

这是一个更新的小提琴，可选支持箭头：http://jsfiddle.net/kevindivdbyzero/JPqXF/

Answer 2

我认为你应该使用带有CSS3过渡的SVG来做这种事情。