News
-
HTML5 Canvas
I’ve had a few clients in the last few days asking about HTML5 and in particular animations on the canvas. I previously had a little look at whats possible but didn’t have time to write any code so I thought it’s time I delved in.
After a quick bit of searching I found a great set of tutorials on starting from the very basic 2D features and building up http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/. Using 2D objects in the canvas you’re able to draw lines, arcs, rectangles, circles… basically a range of simple objects. Once you have the basic objects you can put them together to build up a complex object/shape or scene.
Having built your object/shape/scene a simple way of animating it/them is to use the standard Javascript timing events, setTimeout and setInterval. Remembering to clear the canvas each time:
var canvas = document.getElementById(“myCanvas”);
var context = canvas.getContext(“2d”);
context.clearRect(0, 0, canvas.width, canvas.height);
