html>

画一个时钟

#canvas{

margin:200px auto;

border: 1px solid #e9e0b5;

display: block;

}

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var width = ctx.canvas.width;

var height = ctx.canvas.height;

var r = width /2;

/*canvas绘制环境*/

function drawBackGround(ctx){

/*绘制圆框，60点，数字*/

ctx.save();

ctx.translate(r,r);

ctx.beginPath();

ctx.arc(0,0,r-5,0,Math.PI * 2);

ctx.lineWidth = 10;

ctx.stroke();

ctx.closePath();

ctx.font = "18px Arial";

ctx.textBaseline = "middle";

ctx.textAlign = "center";

var hoursNumber = [3,4,5,6,7,8,9,10,11,12,1,2];

/*传入的number为数组值，i为数组索引*/

hoursNumber.forEach(function (number,i) {

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

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

/*cos与sin传入的是弧度值，包括rotate也是弧度，但是css中为deg*/

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

ctx.fillText(number,x,y);

});

for(var i= 0;i

var radDot = 2 * Math.PI / 60 * i;

var x = Math.cos(radDot) * (r - 18);

var y = Math.sin(radDot) * (r - 18);

ctx.beginPath();

/*必须在这里beginpath?   不然出现被灰圈遮住*/

if(i % 5 === 0){

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

ctx.fillStyle = "#000";

}else

{

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

ctx.fillStyle = "gray";

}

ctx.fill();

}

}

function drawHour(hour,minnue){

ctx.save();

ctx.beginPath();

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

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

/*分针会导致时针的运动，需要加上分针引起的弧度，每分钟会导致时针变化的弧度*/

ctx.rotate(rad + mrad);

ctx.moveTo(0,10);

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

ctx.lineCap = "round";

ctx.lineWidth = 6;

ctx.stroke();

ctx.restore();

}

function drawMinute(minute){

ctx.save();

ctx.beginPath();

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

ctx.rotate(rad);

ctx.moveTo(0,10);

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

ctx.lineCap = "round";

ctx.lineWidth = 3;

ctx.stroke();

ctx.restore();

};

function drawSecond(second){

ctx.save();

ctx.beginPath();

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

ctx.rotate(rad);

ctx.moveTo(-2,20);

ctx.lineTo(2,20);

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

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

ctx.fillStyle = "#c14543";

ctx.fill();

ctx.restore();

};

function drawDot(){

ctx.beginPath();

ctx.fillStyle = "#fff";

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

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(ctx);

drawHour(hour,minute);

drawMinute(minute);

drawSecond(second);

drawDot();

ctx.restore()

}

draw();

setInterval(draw,1000);

欢迎明天采纳