HTML5 Canvas API [animation]

Get Started
1

Hi,

Refer to https://dl.dropbox.com/u/43106216/final-result.jpg

If u c, u will notice a plane fly(animate) from one point to another while left a white dotted trail and generate a loop as well. I like to achieve this using HTML5.

Brief: I know 2 points: start point and end point. I need to move the plane while follow random path(not fixed) and of course generate a loop when move and reach the destination. white dotted is the path plane go through.

Is it possible using HTML5? I just like to know possibility. If anyone knows it would be greatly appreciated if u let me know.

Thanks

2

Hi rashidul,

I have done this before using an SVG path. The getPointAtLength function can be used to get an x/y coordinate along an SVG path.
Here’s the article I wrote on it:

You can still render this in a canvas element but the canvas API lacks the types of path functions required for path tracking.

Hope it helps :slight_smile:

3

Hi Mark,

Thanks for ur post. i greatly appreciate it :slight_smile:

So I can produce the result that i wanted using canvas?

Thanks again,
R

4

Read the post and yell out if you need help :slight_smile:

As far as I know, Canvas won’t help you with with the maths and path itself. You will need SVG for that.
Canvas would let you draw the plane animation once you know where to plot it at different points.
Alternatively you could just use SVG for the rendering also, and not need Canvas at all.

I would only reach for canvas if you find that the SVG rendering is too slow, it should be fine with a few elements.
SVG also has that dashed lined effect that you have in your design.

Check out http://raphaeljs.com/