canvas 实现时钟效果

var clock = document.getElementById('clock');
var cxt = clock.getContext('2d');

function drawClock(){

var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
hour = hour + min/60;
hour = hour>12? hour-12: hour;

// 清除画布
cxt.clearRect(0, 0, 500, 500);
// 表盘
cxt.lineWidth = 10;
cxt.strokeStyle = 'blue';
cxt.beginPath();
cxt.arc(250, 250, 200, 0, 360, false);
cxt.closePath();
cxt.stroke();
// 刻度
for(var i=0; i<12; i++){
cxt.save();
cxt.lineWidth = 7;
cxt.strokeStyle = '#000';
cxt.translate(250, 250);
cxt.rotate(i * 30 * Math.PI/180);
cxt.beginPath(0, 0);
cxt.moveTo(0, -170);
cxt.lineTo(0, -190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}

for(var i=0; i<60; i++){
cxt.save();
cxt.lineWidth = 5;
cxt.strokeStyle = '#000';
cxt.translate(250, 250);
cxt.rotate(i * 6 * Math.PI/180);
cxt.beginPath();
cxt.moveTo(0, -180);
cxt.lineTo(0, -190);
cxt.closePath();
cxt.stroke();
cxt.restore();
}

// 时针
cxt.save();
cxt.lineWidth = 7;
cxt.strokeStyle = '#000';
cxt.translate(250, 250);
cxt.rotate(30 * hour * Math.PI/180);
cxt.beginPath();
cxt.moveTo(0, -140);
cxt.lineTo(0, 10);
cxt.closePath();
cxt.stroke();
cxt.restore();

// 分针
cxt.save();
cxt.lineWidth = 5;
cxt.strokeStyle = '#000';
cxt.translate(250, 250);
cxt.rotate(6 * min * Math.PI/180);
cxt.beginPath();
cxt.moveTo(0, -160);
cxt.lineTo(0, 15);
cxt.closePath();
cxt.stroke();
cxt.restore();

// 秒针
cxt.save();
cxt.lineWidth = 3;
cxt.strokeStyle = 'red';
cxt.translate(250, 250);
cxt.rotate(6 * sec * Math.PI/180);
cxt.beginPath();
cxt.moveTo(0, -170);
cxt.lineTo(0, 20);
cxt.closePath();
cxt.stroke();

cxt.beginPath();
cxt.arc(0, 0, 6, 0, 360, false);
cxt.closePath();
cxt.fillStyle = 'gray';
cxt.fill();
cxt.stroke();

cxt.beginPath();
cxt.arc(0, -150, 5, 0, 360, false);
cxt.closePath();
cxt.fillStyle = 'gray';
cxt.fill();
cxt.stroke();

cxt.restore();
}
drawClock();
setInterval(drawClock, 1000);