Get Moving! (with HTML5 canvas)
•
0 gostou•648 visualizações
Introduction to animation with HTML5 canvas.
Recomendados
Mais conteúdo relacionado
Semelhante a Get Moving! (with HTML5 canvas)
Semelhante a Get Moving! (with HTML5 canvas) (20)
Mais de Seth McLaughlin
Mais de Seth McLaughlin (10)
Último
Último (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