SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Location
    Bangladesh
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question HTML5 Canvas API [animation]

    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. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    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:
    http://www.yellowshoe.com.au/journal/svg-motion-paths/

    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Location
    Bangladesh
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mark,

    Thanks for ur post. i greatly appreciate it

    Quote Originally Posted by markbrown4 View Post
    You can still render this in a canvas element
    So I can produce the result that i wanted using canvas?

    Thanks again,
    R

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,095
    Mentioned
    28 Post(s)
    Tagged
    1 Thread(s)
    Read the post and yell out if you need help

    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/


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •