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.save();

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];

hourNumbers.forEach(function(number,i){

ctx.font='21px Arial'; ?//定義字體大小對齊

ctx.textAlign='center';

ctx.textBaseline='middle';

var rad=2*Math.PI/12*i;

var x=Math.cos(rad)*(r-36);

var y=Math.sin(rad)*(r-36);

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.arc(x,y,4,0,2*Math.PI,false);

ctx.fillStyle='#f50';

} else{

ctx.fillStyle='#666';

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

};

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

ctx.fill();

}

}

function drawHour (hour,minute) {

// 畫時針

ctx.save();

ctx.beginPath();

var rad=2*Math.PI/12*hour;

var mrad=2*Math.PI/12/60*minute;

ctx.rotate(rad+mrad);

//ctx.rotate(rad);

ctx.lineWidth=6;

ctx.lineCap='round'; //時針兩端的線條

ctx.moveTo(0,10);

ctx.lineTo(0,-r/2);

ctx.stroke();

ctx.restore();

}

function drawMinute (minute) {

// 畫分針

ctx.save();

ctx.beginPath();

var rad=2*Math.PI/60*minute;

ctx.rotate(rad);

ctx.lineWidth=4;

ctx.lineCap='round'; //時針兩端的線條

ctx.moveTo(0,10);

ctx.lineTo(0,-r+40);

ctx.stroke();

ctx.restore();

}

function drawSecond (second) {

// 畫秒針

ctx.save();

ctx.beginPath();

ctx.fillStyle='#c12';

var rad=2*Math.PI/60*second;

ctx.rotate(rad);

ctx.moveTo(-2,20);

ctx.lineTo(2,20);

ctx.lineTo(1,-r+20);

ctx.lineTo(-1,-r+20);

ctx.fill();

//ctx.stroke();與時針分針不同，此句刪除

ctx.restore();

}?

function drawDot() {

ctx.beginPath();

ctx.arc(0,0,4,0,2*Math.PI,false);

ctx.fillStyle='#fff';

ctx.fill();

}

function draw() {

ctx.clearRect(0,0,width,height);

var now=new Date();

var hour=now.getHours();

var minute-now.getMinutes();

var second=now.getSeconds();

drawBackground();

drawHour (hour,minute);

drawMinute (minute);

drawSecond (second);

drawDot();

ctx.restore();

}

draw();

setInterval(draw,1000);