var sz=200;
document.write('
');
ca=document.getElementById('c'); //CLOCK
setupAnalogClock(ca,sz);
function setupAnalogClock(ca,sz){
ctx=ca.getContext('2d');
cx=sz/2;
cy=sz/2;
function t(){
document.getElementById('cv').style.visibility='visible';
nd=new Date();
h=nd.getHours();
m=nd.getMinutes();
s=nd.getSeconds();
ctx.clearRect(0,0,sz,sz);
drawStatic();
ctx.strokeStyle='rgb(98,92,181)'; //HOUR HAND
ctx.lineWidth=Math.round(sz/40);
drawHand(Math.round(sz/3),h*30+m/2+s/120);
ctx.lineWidth=Math.round(sz/40); //MIN HAND
drawHand(Math.round(sz/2)-Math.round(sz/50),m*6+s/10);
ctx.strokeStyle='rgb(187,0,0)'; //SECOND HAND
ctx.lineWidth=Math.round(sz/60);
drawHand(Math.round(sz/2)-Math.round(sz/50),s*6);
ctx.arc(cx,cy,Math.round(sz/80),0,2*Math.PI,false); //CENTER
ctx.fill();
function drawStatic(){
ctx.beginPath();
ctx.arc(cx,cy,Math.round(sz/2)-Math.round(sz/80),0,2*Math.PI,false);
ctx.strokeStyle='rgb(98,92,181)';
ctx.lineWidth=Math.round(sz/100);
ctx.stroke();
ctx.closePath();
drawNumbers();
function drawNumbers(){
var i=12;
ctx.strokeStyle='rgb(98,92,181)';
ctx.lineWidth=Math.round(sz/80);
while(i>0){
ctx.save();
ctx.beginPath();
ctx.translate(cx,cy);
g=(i*30)*Math.PI/180;
ctx.rotate(g);
ctx.translate(0,-Math.round(sz)/2);
ctx.save(); //NUMBERS
ctx.translate(0,Math.round(sz/11));
ctx.rotate(-g);
ctx.font='bold '+Math.round(sz/8)+'px Arial';
ctx.textAlign='center';
ctx.fillStyle='rgb(98,92,181)';
ctx.fillText(i,0,Math.round(sz/26));
ctx.restore();
ctx.moveTo(0,Math.round(sz/80));
ctx.lineTo(0,Math.round(sz/26));
ctx.stroke();
ctx.closePath();
ctx.restore();
i--;
}
}
}
function drawHand(l,a){
ctx.save();
ctx.beginPath();
ctx.translate(cx,cy);
ctx.rotate(-180*Math.PI/180); // Correct for top left origin
ctx.rotate(a*Math.PI/180);
ctx.moveTo(0,0);
ctx.lineTo(0,l);
ctx.stroke();
ctx.closePath();
ctx.restore();
}
}
t();
window.setInterval(t,1000);
}
document.write('
');