HTML5 Animations and Art
Artist paint on a canvas- in an art gallery you will see canvases of all sizes.
Paintings are made to look 3 dimensional using perspective and diminution.
Perspective: horizontal lines converge to a vanishing point, vertical lines shorten.
Diminution: objects appear smaller the further they are away from the observer.
Using perspective and diminution we can make 3 dimensional drawings on canvas.
Artists paint the background first, distant objects next, objects nearest to them last.
When an object obscures part of another object we perceive it as nearer to us.
Objects that move away from us get smaller, objects moving towards us get larger.
We can use artists' techniques to create realistic 3D animations intuitively.
It is not possible to create HTML5 animations without using some mathematical techniques.
Animations on this Website
The HTML5 canvas is an HTML element: each canvas on an HTML5 page is defined in a canvas tag.
Multilayered canvases are used: they reduce the processing time of animations.
Canvases are styled so they appear the same to users and they have a simple user interface.
The Next button controls canvas sequences- Play, Pause and Repeat allow the user to control animations.
Canvases that have buttons have an event listener and an event handler.
Descriptive text associated with each canvas is also controlled by the Next button.
Each web page is divided into HTML5 sections, canvas size is changed dynamically to suit images drawn on it.
This allows shapes such as ellipses, stars and polygons to be used with all of the major browsers.