Animating a clock
An animated clock can be visualized easily. The output of this recipe is:
How to do it…
The recipe for the clock is as follows:
The HTML code:
<html> <head> <title>Animated Clock</title> <script src="AnalogClock.js"></script> </head> <body onload="animate();"> <canvas id="MyCanvasArea" width="550" height="400" style="border:2px solid blue;" > your browser does not support canvas </canvas> <h1>An Elegant Analog Clock</h1> </body> </html>
The JavaScript code:
function animate()
{
reqAnimFrame = window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame
;
showClock();
reqAnimFrame(animate);
}
function showClock() {
// DEFINE CANVAS AND ITS CONTEXT.
var can = document.getElementById('MyCanvasArea...
