Unique Real time analogue clock
Clockwise
It shows the real time of your computer; just check it!
The movement of the hour hand, minute hand and seconds' hand are controlled by parametric equations. The second hand moves 60 every second.
The Source Code for Live Analogue Clock
Here is the source code for the animation. It is JavaScript.
<script type="text/javascript" >
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var k;
function timing() {
//get date
var tme= new Date();
//get seconds
var s=tme.getSeconds();
//get minutes
var m=tme.getMinutes();
//get hours
var h=tme.getHours();
context.clearRect(0,0,500,500);
//seconds
context.beginPath();
context.arc(250,250,100,-Math.PI/2,[s*Math.PI/30]-Math.PI/2)
context.strokeStyle='red';
context.lineWidth=6;
context.stroke();
context.beginPath();
context.arc(250,250,70,-Math.PI/2,[m*Math.PI/30]-Math.PI/2)
context.strokeStyle='blue';
context.lineWidth=10;
context.stroke();
if(h<=12)
{
context.beginPath();
context.arc(250,250,40,-Math.PI/2,[(h)*Math.PI/6]-Math.PI/2)
context.strokeStyle='brown';
context.lineWidth=14;
context.stroke();
}
else
{
context.beginPath();
context.arc(250,250,40,-Math.PI/2,[(h-12)*Math.PI/6]-Math.PI/2)
context.strokeStyle='brown';
context.lineWidth=14;
context.stroke();
}
}
window.setInterval('timing()', 1000);
</script>