简体繁体 English

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

[英]How to draw a path partially in HTML5's canvas?

原文 2013-03-02 03:21:34 8 2 html/ html5/ canvas/ html5-canvas

Let's say I have curved path made using a serie of bezierCurveTo() calls. 假设我有一系列使用bezierCurveTo()调用的弯曲路径。 I'd like to make it appear progressively in an animation, by increasing the percentage of it that is drawn frame-after-frame. 我想通过增加逐帧绘制的百分比来使其逐渐出现在动画中。 The problem is that I cannot find a standard way to draw only a part of a canvas path - would someon know of a good way (or even a tricky way) to achieve this? 问题是我找不到仅绘制画布路径一部分的标准方法-有人会知道实现此目的的好方法（甚至是棘手的方法）吗？

2 个解决方案

Sure...and Simon Porritt did all the hard math for us! 当然...西蒙·波里特（Simon Porritt）为我们做了所有艰苦的数学工作！

jsBezier is a small lib with a function: pointAlongCurveFrom(curve, location, distance) that will let you incrementally plot each point along your Bezier curve. jsBezier是一个小型函数库，具有以下功能：pointAlongCurveFrom（curve，location，distance），可让您沿Bezier曲线递增地绘制每个点。

jsBezier is available on GitHub: https://github.com/sporritt/jsBezier jsBezier在GitHub上可用： https : //github.com/sporritt/jsBezier

Just found a small library that does exactly that: https://github.com/camoconnell/lazy-line-painter 刚刚发现一个小型图书馆，它确实可以做到： https ： //github.com/camoconnell/lazy-line-painter

It relies on the Raphael lib ( http://raphaeljs.com/ ), and the two put together do not make too big a payload. 它依赖于Raphael库（ http://raphaeljs.com/ ），并且两者合计不会产生太大的有效负载。