Код: Выделить всё
// clock
var oldSeconds = 0;
function updateClock() {
var t = new Date();
var clockArms = [t.getHours(), t.getMinutes(), t.getSeconds()];
if (clockArms[2] == oldSeconds) return; //секунды не менялись? выйти
oldSeconds = clockArms[2];
var c = document.getElementById('clock');
var ctx = c.getContext('2d');
//очистить канву:
//ctx.fillStyle = 'white'; // фон квадрата часов
ctx.fillRect(0, 0, c.width, c.height);
//нарисовать контур часов:
var x = Math.round(c.width/2);
var y = Math.round(c.height/2);
var r = Math.round(Math.min(x,y));
ctx.beginPath();
ctx.arc(x,y,r,0,2*Math.PI,true);
ctx.fillStyle = 'rgba(200,200,200,1)';// задает фон внутри циферблата
ctx.fill(); //????????
ctx.lineWidth = 1;
ctx.strokeStyle = 'rgba(128,128,128,0)';//-----------------------------окружность!!!!!
ctx.stroke();
ctx.closePath();
//нарисовать метки циферблата и цифры:
ctx.save();
ctx.textBaseline = "middle";
ctx.textAlign = "center";
// ctx.shadowColor = "rgb(128,0,0)"; //тени возле цифр
// ctx.shadowOffsetX = 3;
// ctx.shadowOffsetY = 3;
// ctx.shadowBlur = 6;
var delta = Math.max(8,Math.round(r/10)); //для размера шрифта и отсечек
ctx.font = 'bold '+delta+'pt sans-serif';
var u=Math.PI/2;
var r1=r-delta;
for (var i=1; i<=12; i++) {
ctx.beginPath();
var x1 = x+Math.round(r1*Math.cos(u)), //так можно узнать позиции делений циферблата
y1 = y-Math.round(r1*Math.sin(u)),
x2 = x+Math.round(r*Math.cos(u)),
y2 = y-Math.round(r*Math.sin(u));
ctx.strokeStyle = 'rgb(99,99,99)';
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
u+=Math.PI/6;
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.fillStyle = 'rgba(33,33,33,0)';
//ctx.fillText (''+(13-i),x1,y1); //а так вывести цифры по часовому кругу
ctx.fill();
ctx.closePath();
}
ctx.restore();
//нарисовать стрелки:
clockArms[1] += clockArms[2] / 60;
clockArms[0] += clockArms[1] / 60;
drawClockArm(ctx, x, y, clockArms[0] * 30, 2*r/2.5 - 15, 5, 'navy'); // длина , толщина и цвет стрелок
drawClockArm(ctx, x, y, clockArms[1] * 6, 2*r/2.2 - 10, 3, 'darkgreen');
drawClockArm(ctx, x, y, clockArms[2] * 6, 2*r/2.0 - 6, 2, 'darkred');
}
function drawClockArm(ctx, x,y, degrees, len, lineWidth, style) {
ctx.save();
ctx.lineWidth = lineWidth;
ctx.lineCap = 'round';
ctx.translate(x, y);
ctx.rotate((degrees - 90) * Math.PI / 180);
ctx.strokeStyle = style;
ctx.beginPath();
ctx.moveTo(-len / 10, 0);
ctx.lineTo(len, 0);
ctx.stroke();
ctx.restore();
}
function initClock() {
window.setInterval(updateClock, 333); //интервал обновления - треть секунды
}
onload = initClock;]