Часы на JS Canvas

Пример:
http://profiwm.com/files/zc/Obmennik_fajlov/Kartinki/PROFIWM_COM_273_4181_skachannyee_fajly.png
">http://profiwm.com/files/zc/Obmennik_fajlov/Kartinki/PROFIWM_COM_273_4181_skachannyee_fajly.png
" style="max-width:300px;" alt="Изображение">

                        
<canvas height="300" width="300" id="example">

	У вашего браузера нет поддержки canvas

</canvas>



var i = 0;

var CColor = "#383840"; //Цвет стрелок

var CBackground = "#FFF"; //Цвет фона

var CSeconds = "#D14"; //Цвет секундной стрелки

var CSize = 300; //Размер поля

var CCenter = CSize / 2; //Радиус круга

var CTSize = CCenter - 10; //Расстояние от центра где рисуются отметки минут 

var CMSize = CTSize * 0.7; //Длинна минутной стрелки

var CSSize = CTSize * 0.8; //Длинна секундной стрелки

var CHSize = CTSize * 0.6; //Длинна часовой стрелки

var var example;



function ctxline(x1,y1,len,angle,color,wid){//Функция рисования линии под углом

	var x2 = (CCenter + (len * Math.cos(angle)));

	var y2 = (CCenter + (len * Math.sin(angle)));

	ctx.beginPath();

	ctx.strokeStyle = color;

	ctx.lineWidth = wid; 

	ctx.moveTo(x1,y1);

	ctx.lineTo(x2,y2);

	ctx.stroke();

}



function ctxcircle(x,y,rd,color){//Функция рисования круга

	ctx.beginPath();

	ctx.arc(x, y, rd, 0, 2*Math.PI, false);

	ctx.fillStyle = color;

	ctx.fill();

	ctx.lineWidth = 1;

	ctx.strokeStyle = color;

	ctx.stroke();

}



function tick(){ //Функция рисования стрелок 

	//Стираем предыдущие стрелки

	ctxcircle(CCenter,CCenter ,CSSize,CBackground);

	//Вычисляем поворот

	i = 360/3600 * ((new Date().getMinutes()*60)+new Date().getSeconds());

	//Рисуем стрелку

	ctxline(CCenter,CCenter,CMSize,((i-90) / 180 * Math.PI),CColor,4);//Минутная



	i = 360/720*((new Date().getHours()*60)+ new Date().getMinutes());

	ctxline(CCenter,CCenter,CHSize,((i-90) / 180 * Math.PI),CColor,5);// Часовая



	ctxcircle(CCenter,CCenter,9,CColor);//Круг от стрелки



	i = 360/(60*1000)* ((new Date().getSeconds()*1000)+ new Date().getMilliseconds());

	ctxline(CCenter,CCenter,CSSize,((i-90) / 180 * Math.PI),CSeconds,3);//Секундная



	ctxcircle(CCenter,CCenter,6,CSeconds);//Круг от секундной стрелки 

}

window.onload = function () {

	example= document.getElementById("example"), ctx = example.getContext('2d');

	ctx.fillStyle = CBackground; 

	ctx.fillRect(0, 0,example.width,example.height);



	for(iv=0;iv<12;iv++){// Рисуем часовые метки

		i = 360/12*iv;

		ctxcircle((CCenter + (CTSize * Math.cos((i-90) / 180 * Math.PI))),(CCenter + (CTSize * Math.sin((i-90) / 180 * Math.PI))),5,CColor);

	}



	for(iv=0;iv<60;iv++){// Рисуем минутные метки

		i = 360/60*iv;

		ctxcircle((CCenter + (CTSize * Math.cos((i-90) / 180 * Math.PI))),(CCenter + (CTSize * Math.sin((i-90) / 180 * Math.PI))),2,CColor);

	}



	setInterval('tick(); ',10);

}