Get Moving!
with canvas
The <canvas> Element
<!doctype html>
<html>
<head>
<title>Canvas is awesome!</title>
</head>
<body>
<canvas width="500" he...
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 squa...
In code
var x = 50, y = 50;
function clearScreen() {...}
function drawSquare(x, y) {...}
function draw() {
clearScreen();
...
Putting it all together
http://codepen.io/sethmcl/pen/duGsh
Upcoming SlideShare
Loading in...5
×

Get Moving! (with HTML5 canvas)

253

Published on

Introduction to animation with HTML5 canvas.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
253
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Get Moving! (with HTML5 canvas)

  1. 1. Get Moving! with canvas
  2. 2. 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>
  3. 3. The illusion of motion
  4. 4. The illusion of motion Frame 1
  5. 5. The illusion of motion Frame 2
  6. 6. The illusion of motion Frame 3
  7. 7. The illusion of motion Frame 4
  8. 8. The illusion of motion Frame 5
  9. 9. The illusion of motion Frame 6
  10. 10. The illusion of motion Frame 7
  11. 11. The illusion of motion Frame 8
  12. 12. The illusion of motion Frame 9
  13. 13. The illusion of motion Frame 10
  14. 14. The illusion of motion Frame 11
  15. 15. The illusion of motion Frame 12
  16. 16. Logic of motion clear screen draw square pause
  17. 17. In code function draw() { // clear screen // draw square // pause } draw();
  18. 18. In code function draw() { clearScreen(); drawSquare(); // pause } draw();
  19. 19. In code function draw() { clearScreen(); drawSquare(); setTimeout(draw, 50); } draw();
  20. 20. In code function clearScreen() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); }
  21. 21. In code function drawSquare() { ctx.fillRect(50, 50, 100, 100); }
  22. 22. 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
  23. 23. 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();
  24. 24. Putting it all together http://codepen.io/sethmcl/pen/duGsh
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×