Embed Size (px)
DESCRIPTION
Introduction to animation with HTML5 canvas.
Citation preview
Get Moving!with canvas
The <canvas> Element
<!doctype html>
<html>
<head>
<title>Canvas is awesome!</title>
</head>
<body>
<canvas width="500" height="500">
Sorry, your browser does not support canvas :(
</canvas>
</body>
</html>
The illusion of motion
The illusion of motion
Frame 1
The illusion of motion
Frame 2
The illusion of motion
Frame 3
The illusion of motion
Frame 4
The illusion of motion
Frame 5
The illusion of motion
Frame 6
The illusion of motion
Frame 7
The illusion of motion
Frame 8
The illusion of motion
Frame 9
The illusion of motion
Frame 10
The illusion of motion
Frame 11
The illusion of motion
Frame 12
Logic of motion
clear screen
draw square
pause
In code
function draw() {
// clear screen
// draw square
// pause
}
draw();
In code
function draw() {
clearScreen();
drawSquare();
// pause
}
draw();
In code
function draw() {
clearScreen();
drawSquare();
setTimeout(draw, 50);
}
draw();
In code
function clearScreen() {
ctx.clearRect(0,
0,
ctx.canvas.width,
ctx.canvas.height);
}
In code
function drawSquare() {
ctx.fillRect(50, 50, 100, 100);
}
In code
function drawSquare(x, y) {
ctx.fillRect(x, y, 100, 100);
}
parameterize the function so that we can draw the square in different locations
In code
var x = 50, y = 50;
function clearScreen() {...}
function drawSquare(x, y) {...}
function draw() {
clearScreen();
drawSquare(x, y);
x = x + 5;
setTimeout(draw, 50);
}
draw();
Putting it all together
http://codepen.io/sethmcl/pen/duGsh
