Just playing around with animating HTML5 Canvas elements with Javascript. I started with this basic horizontally moving rectangle, then added some trig code to move multiple objects around in a circle. Here’s a demo.
If the Math.sin() & Math.cos() is confusing, watch the video tutorials on Trig and Unit Circle in particular at the Khan Academy.
<!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } #myCanvas { border: 1px solid #9C9898; } </style> <script> var numsqr = 40; var mShapes = []; window.requestAnimFrame = (function(callback){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })(); function drawRect(myRectangle){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height); context.fillStyle = "#8ED6FF"; context.fill(); context.lineWidth = myRectangle.borderWidth; context.strokeStyle = "black"; context.stroke(); } function animate(lastTime, mShapes, animProp){ if (animProp.animate) { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // update var date = new Date(); var time = date.getTime(); var timeDiff = time - lastTime; for(var j = 0; j < numsqr; j++){ //circles around a midpoint in a larger circle, specified by the radius mShapes[j].x = mShapes[j].centerX + Math.cos( mShapes[j].angle * Math.PI/180 ) * mShapes[j].radius; mShapes[j].y = mShapes[j].centerY + Math.sin( mShapes[j].angle * Math.PI/180 ) * mShapes[j].radius; (mShapes[j].angle < 360) ? mShapes[j].angle += 1 : mShapes[j].angle = 0; } lastTime = time; // clear context.clearRect(0, 0, canvas.width, canvas.height); // draw for(var l = 0; l < numsqr; l++) drawRect(mShapes[l]); // request new frame requestAnimFrame(function(){ animate(lastTime, mShapes, animProp); }); } } window.onload = function(){ for(var i = 0; i < numsqr; i++){ mShapes[i] = { angle:0, width:20, height:20, x: 100 + i*10, y: 250, centerX: 290, centerY: 290, radius: 250 - (1 + i * 5), borderWidth: 1 }; } /* * make the animation properties an object * so that it can be modified by reference * from an event */ var animProp = { animate: false }; // add click listener to canvas document.getElementById("myCanvas").addEventListener("click", function(){ if (animProp.animate) { animProp.animate = false; } else { animProp.animate = true; var date = new Date(); var time = date.getTime(); animate(time, mShapes, animProp); } }); for(var k = 0; k < numsqr; k++) drawRect( mShapes[k] ); }; </script> </head> <body onmousedown="return false;"> <canvas id="myCanvas" width="600" height="600"></canvas> </body> </html>