Use of HTML5 gives developers new horizons in animation implement for their websites. There is no need to use outdated Flash technology or to overload traffic with large images, you can simply familiarize with a few norms of creation of motion interpretation by canvas redraw.
Canvas is a page area reserved for drawing vector elements; there are local coordinates in this area. The following line should be written by using JS to draw, for example, a circle:
arc(ox, oy, radius, startAngle, endAngle, antiClockWise)
where ox and oy — center coordinates, radius — circle radius, startAngle and endAngle — start and end angles (in radians) to draw the circle, and antiClockWise is the direction of motion during drawing (true for clockwise motion, false is for counterclockwise).
The given technology allows creation of all basic forms and elements, thus providing the opportunity to ideally create a picture on the reserved area at your website. This method does not effect the page loading time as the drawing of elements takes place instantly, without loading images as had previously been the case.
Now about animation. Everybody is aware about how old cartoons were created, when each frame was drawn manually and the illusion of motion was created by frame rate at which they were then show.
This approach lies behind the animation creation in canvas. Redrawing of all elements takes place automatically every 0.2 seconds, and this creates realistic motion.
As a result the balls move according to programmed laws of motion.
You can get aquainted with the same technology of Google company: HTML5 Canvas Google Bouncing Balls. This technology is used to create modern browser games, moving elements interaction with users and also just to make a webpage more appealing to a client.
Image Credits: Labs64