Get Moving! (with HTML5 canvas)
•
0 gefällt mir•648 views
Introduction to animation with HTML5 canvas.
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Get Moving! (with HTML5 canvas)
Ähnlich wie Get Moving! (with HTML5 canvas) (20)
Mehr von Seth McLaughlin
Mehr von Seth McLaughlin (10)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
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