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

Question

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

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

另外，是否可以在悬停时对其进行动画处理以扩展箭头，也许使用弹性效果？

Answer 1

Raphael 和 canvas 在以纸笔风格绘制线条时都有一些限制。我发现模拟这种事情的最佳方法是将 1 像素路径迭代地转换为目标路径，如下面的小提琴：http: //jsfiddle.net/zPRha/31/ 只需稍做工作，您就可以计算沿路径的最后两点之间的角度，并转换/旋转箭头路径以匹配绘制的线。这不是一个理想的解决方案，但它会起作用。

Raphael 内置的悬停支持使缩放/取消缩放非常容易。我的理解是，这样的处理在本机使用画布会更加迟钝，尽管我确信一些画布库已经自动消除了这个问题。

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

Answer 2

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