![PraveenKumar](https://www.crazyengineers.com/img/avatar.jpg)
PraveenKumar
Member • Dec 23, 2011
Simple HTML5 Canvas Animation
Hi friends,
I thought of sharing a simple canvas animation to make a ball bounce within a square. We are going to use MooTools library in this. Okay, we have three parts:
1. HTML
2. CSS
3. JavaScript
Lets start with the HTML (just the content):
Now comes the JavaScript part (Just the onLoad JS):
Now the complete code with linking the MooTools library... 😀
I thought of sharing a simple canvas animation to make a ball bounce within a square. We are going to use MooTools library in this. Okay, we have three parts:
1. HTML
2. CSS
3. JavaScript
Lets start with the HTML (just the content):
Lets do some styling using CSS:Simple HTML5 Canvas Animation
body {font: 11pt/14pt Segoe UI, Myriad Pro, Calibri, Tahoma;} #container {text-align: center;} #myCanvas {background: #fff; border: 1px solid #cbcbcb; text-align: center;}
Now comes the JavaScript part (Just the onLoad JS):
var context; var dx = 4; var dy = 4; var y = 150; var x = 10; function draw(){ context = myCanvas.getContext('2d'); context.clearRect(0, 0, 300, 300); context.beginPath(); context.arc(x, y, 20, 0, Math.PI*2, true); context.closePath(); context.fill(); if (x < 0 || x > 300) dx=-dx; if (y < 0 || y > 300) dy = -dy; x += dx; y += dy; } setInterval(draw,10);
Now the complete code with linking the MooTools library... 😀
Simple HTML5 Canvas Animation Basic Canvas Example