var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
function drawBackground(){
ctx.translate(r,r);
ctx.beginPath();
ctx.lineWidth =10;
ctx.arc(0,0,r - 5,0,2*Math.PI,false);
ctx.stroke();
var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font ='18px Arial';
ctx.textAlign ='center';
ctx.textBaseline = 'middle';
hourNumbers.forEach(function(number,i){
var rad = 2 * Math.PI / 12 * i;
var x = Math.cos(rad) *(r-30);
var y = Math.sin(rad) *(r-30);
ctx.fillText(number,x,y);
});
for(var i =0; i<60;i++){
var rad =2 * Math.PI / 60 * i;
var x = Math.cos(rad) *(r-18);
var y = Math.sin(rad) *(r-18);
ctx.beginPath();
if(i%5 ===0){
ctx.fillStyle = '#000';
ctx.arc(x,y,2,0,2*Math.PI,false);
}else{
ctx.fillStyle = '#ddd';
ctx.arc(x,y,2,0,2*Math.PI,false);
}
ctx.fill();
}
}
function drawHour(hour){
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 12 * hour;
ctx.rotate(rad);
ctx.lineWidth = 6;
ctx.lineCap = 'round';
ctx.moveTo(0,10);
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.resore();
}
function drawMinute(minute){
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 60 * minute;
ctx.rotate(rad);
ctx.lineWidth = 3;
ctx.lineCap = 'round';
ctx.moveTo(0,10);
ctx.lineTo(0,-r+30);
ctx.stroke();
ctx.resore();
}
function drawSecond(second){
ctx.save();
ctx.beginPath();
var rad = 2 * Math.PI / 60 * second;
ctx.rotate(rad);
ctx.moveTo(0,10);
ctx.moveTo(-2,20);
ctx.lineTo(2.20);
ctx.lineTo(1,-r+18);
ctx.lineTo(-1,-r+18);
ctx.fill();
ctx.stroke();
ctx.resore();
}
drawBackground();
drawHour(4);
drawMinute(30);
drawSecond(15);
ctx.restore();
restore写错了