Geek asks and answers

How to draw a path partially in HTML5 canvas?

Let's say I have a curved path made using a series of calls bezierCurveTo(). I would like it to appear gradually in the animation, increasing the percentage that looms in the frame after the frame. The problem is that I cannot find a standard way to draw only part of the canvas path - does anyone know of a good (or even difficult way) to achieve this?

+5
source share
2 answers

Just found a small library that does just that: https://github.com/camoconnell/lazy-line-painter

He relies on the Raphael lib ( http://raphaeljs.com/ ), and the two together don't do too much payload.

+2
source

Of course ... and Simon Porritt did all the hard math for us!

jsBezier is a small library with a function: pointAlongCurveFrom (curve, location, distance), which allows you to build each point in stages along a Bezier curve.

jsBezier is available on GitHub: https://github.com/sporritt/jsBezier

+2
source

More articles:


All Articles