6

Let's say I have curved path made using a serie of bezierCurveTo() calls. 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?

Gnurou
  • 7,923
  • 3
  • 22
  • 32
  • 1
    This answer to a previous question may be useful to you. http://stackoverflow.com/questions/878862/drawing-part-of-a-bezier-curve-by-reusing-a-basic-bezier-curve-function – jing3142 Mar 04 '13 at 11:30
  • Oh, that's very helpful. Kudos. – Gnurou Mar 04 '13 at 14:38

2 Answers2

3

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

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 is available on GitHub: https://github.com/sporritt/jsBezier

markE
  • 102,905
  • 11
  • 164
  • 176
  • Thanks - however I tried this method (drawing points along the curve) with other environments and the result is unfortunately quite slow because of the high overdraw. This could be used until a way to use dashes gets standardized though (using dashed lines is an easy way to achieve this effect). Still open to other answers. – Gnurou Mar 02 '13 at 06:16
  • BTW, I haven't tried it, but I think Chrome now supports dashed lines with context.setLineDash([5]). – markE Mar 02 '13 at 06:25
  • That's right - I'd like to stay in the fully compatible zone though :) – Gnurou Mar 02 '13 at 06:42
2

Just found a small library that does exactly that: 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.

Gnurou
  • 7,923
  • 3
  • 22
  • 32