Get Moving! (with HTML5 canvas)
0 likes652 views
The document discusses how to create the illusion of motion using the HTML5 canvas element. It explains that drawing frames in a loop and adding a small delay between each iteration can make a static object, like a square, appear to move across the screen. Key steps include clearing the canvas before each redraw, drawing the object in a new location on each pass, and using setTimeout to pause between draws and create the frame-by-frame effect. Sample code is provided to demonstrate incrementing the x position of a square on each draw to simulate its movement from left to right.
Get Moving! (with HTML5 canvas)
- 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. The illusion of motion
- 4. The illusion of motion Frame 1
- 5. The illusion of motion Frame 2
- 6. The illusion of motion Frame 3
- 7. The illusion of motion Frame 4
- 8. The illusion of motion Frame 5
- 9. The illusion of motion Frame 6
- 10. The illusion of motion Frame 7
- 11. The illusion of motion Frame 8
- 12. The illusion of motion Frame 9
- 13. The illusion of motion Frame 10
- 14. The illusion of motion Frame 11
- 15. The illusion of motion Frame 12
- 16. Logic of motion clear screen draw square pause
- 17. In code function draw() { // clear screen // draw square // pause } draw();
- 18. In code function draw() { clearScreen(); drawSquare(); // pause } draw();
- 19. In code function draw() { clearScreen(); drawSquare(); setTimeout(draw, 50); } draw();
- 20. In code function clearScreen() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); }
- 21. In code function drawSquare() { ctx.fillRect(50, 50, 100, 100); }
- 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. 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. Putting it all together http://codepen.io/sethmcl/pen/duGsh