Prev Demo
HTML5
>
Simple Animation
Next Demo
Write code here
J
|
B
|
A
<!DOCTYPE html> <html> <head> <title>Demo</title> </head> <body> <h1>Simple HTML5 Canvas Animation</h1> <canvas id="Canvas1" width="400" height="400" style="border:1px solid green;"> Canvas is not supported in your browser </canvas> <script type="text/javascript"> var canvas; var context; var x = 50; var y = 60; var timer; function StartAnimation() { canvas = document.getElementById("Canvas1"); context = canvas.getContext("2d"); timer = setInterval(AnimateNow, 10); } function AnimateNow() { x++; y++; context.strokeStyle = "green"; context.strokeRect(x, y, 100, 100); if (y == canvas.height) { x = 50; y = 60; context.clearRect(0, 0, canvas.width, canvas.height); } } StartAnimation(); </script> </body> </html>
Note: We DO NOT save your trial code in our database.
Output
