如何在HTML5的画布中部分绘制路径？

Question

假设我使用一系列bezierCurveTo()调用创建了曲线路径。我想通过逐帧增加绘制的百分比，在动画中逐渐显示它。问题是我找不到一种标准的方法来仅绘制画布路径的一部分 - 有人知道一个好的方法（甚至是一个巧妙的方法）来实现这个吗？

- Gnurou

---

这个之前问题的答案可能对你有用。https://dev59.com/cXNA5IYBdhLWcg3wpvpg - jing3142

哦，这非常有帮助。赞。 - Gnurou

Answer 1

当然，Simon Porritt已经为我们做了所有的难算！

jsBezier是一个小型库，其中包含一个函数：pointAlongCurveFrom(curve, location, distance)，它可以让您逐步绘制贝塞尔曲线上的每个点。

jsBezier可在GitHub上获取：https://github.com/sporritt/jsBezier

- markE

---

谢谢 - 然而我尝试在其他环境中使用这种方法（沿着曲线绘制点），结果不幸的是由于高过绘制速度相当慢。虽然这可以用来代替虚线直到一种使用虚线的方法被标准化了（使用虚线是实现此效果的简单方法）。仍然开放其他答案。 - Gnurou

顺便说一句，我还没有尝试过，但我认为Chrome现在支持使用context.setLineDash([5])来绘制虚线。 - markE

没错 - 我想保持完全兼容的状态 :) - Gnurou

Answer 2

我找到了一个小型库，正好可以实现这个功能：https://github.com/camoconnell/lazy-line-painter。它依赖于 Raphael lib (http://raphaeljs.com/)，两者结合在一起不会造成太大的负担。

- Gnurou