canvas
feature which allows you to draw graphics on a webpage using JavaScript. I wrote a quick example showing a few balls bouncing around.
Click on the box below, to activate:
<script type="text/javascript"> var width = 100; var height = 200; function Ball(){ // random radius this.radius = Math.floor(Math.random()*(10-5+1))+5; // random x and y this.x = Math.floor(Math.random()*(width-this.radius+1))+this.radius; this.y = Math.floor(Math.random()*(width-this.radius+1))+this.radius; // random direction, +1 or -1 this.dx = Math.floor(Math.random()*2) * 2 - 1; this.dy = Math.floor(Math.random()*2) * 2 - 1; //random colour, r, g or b var rcol = Math.floor(Math.random()*3); this.col = rcol==0 ? "red" : rcol==1 ? "blue" : "green"; } // create an array of balls numBalls = 10; var balls = new Array(numBalls); for(i= 0 ; i < numBalls ; i++){ balls[i] = new Ball(); } // draw the balls on the canvas function draw(){ var canvas = document.getElementById("myCanvas"); // check if supported if(canvas.getContext){ var ctx=canvas.getContext("2d"); //clear canvas ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.globalAlpha = 0.5; ctx.strokeStyle="black"; // draw each ball for(i = 0; i < numBalls ; i++){ var ball = balls[i]; ctx.fillStyle=ball.col; ctx.beginPath(); // check bounds // change direction if hitting border if(ball.x<=ball.radius || ball.x >= (width-ball.radius)){ ball.dx *= -1; } if(ball.y<=ball.radius || ball.y >= (height-ball.radius)){ ball.dy *= -1; } // move ball ball.x += ball.dx; ball.y += ball.dy; // draw it ctx.arc(ball.x, ball.y, ball.radius, 0, 2*Math.PI, false); ctx.stroke(); ctx.fill(); } } else{ //canvas not supported } } // calls draw every 10 millis function bounce(){ setInterval(draw, 10); } </script> <canvas id="myCanvas" width="100" height="200" style="border-style:solid;border-width:1px" onclick="bounce()"> Canvas not supported.</canvas>Further Reading:
Canvas Tutorial [developer.mozilla.org]