利用Canvas制作时钟

<canvas id="myCanvas" style="border:1px red solid" width="300px"; height="300px";></canvas>

var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d");

drawfun();
setInterval(drawfun,1000);

//清除画布ctx.clearRect(0, 0, 300, 300);

 //时钟框和圆心 ctx.beginPath();
 ctx.arc(150,150,100,0,2*Math.PI);
 ctx.stroke();
 ctx.beginPath();
 ctx.fillStyle="black";
 ctx.arc(150,150,3,0,2*Math.PI);
 ctx.fill();

//绘制时分刻度
 for(var i=0;i<60;i++){
 ctx.save();
 ctx.beginPath(); //让画布以圆心为原点
 ctx.translate(150,150); //每秒之间的角度
 ctx.rotate(Math.PI*2/60*i); //开始绘制刻度
 ctx.moveTo(0,-99); //时钟刻度
 if(i%5==0){
 ctx.strokeStyle = '#333';
 ctx.lineWidth = 3;
 ctx.lineTo(0,-87);
 }else {//分钟刻度
 ctx.strokeStyle = '#ccc';
 ctx.lineWidth = 2;
 ctx.lineTo(0,-90);
 }
 ctx.stroke();
 ctx.closePath();
 ctx.restore();
 }

//绘制小时数
 for(var i=0;i<60;i++){
 ctx.beginPath(); //获取每秒秒钟之间的弧度算出小时数的坐标
 var hudu = (2*Math.PI / 360) * 6 * i; 
 var X = 150 + Math.sin(hudu) * 80 - 3.5; 
 var Y = 150 - Math.cos(hudu) * 80 + 5; //注意此处是“-”号，因为我们要得到的Y是相对于（0,0）而言的。
 if(i%5==0){ if(i==0){
 ctx.fillText("12",X-3,Y);
 }else{
 ctx.fillText("" + i / 5 + "",X,Y);
 }
 ctx.stroke();
 }
 }

 var date = new Date(); 
 var Hour = date.getHours(); //获取小时数(0-23)
 var Minute = date.getMinutes(); //获取分钟数(0-59)
 var Second = date.getSeconds(); //获取秒数(0-59)
 //绘制秒钟 ctx.save();
 ctx.beginPath(); //修改画布原点，以圆心为原点
 ctx.translate(150, 150); //指针每秒旋转度数
 ctx.rotate(Math.PI * 2 / 60 * Second);
 ctx.strokeStyle = 'red';
 ctx.lineWidth = 1;
 ctx.moveTo(0, 20);
 ctx.lineTo(0, -70);
 ctx.stroke();
 ctx.closePath();
 ctx.restore(); //绘制分钟 
 ctx.save();
 ctx.beginPath();
 ctx.translate(150, 150); //当前分钟的角度加上每秒分钟旋转的角度，如果不加分钟只会当秒钟过整分的时候才会旋转
 ctx.rotate(Math.PI * 2 / 60 * Minute+Math.PI * 2 / 60/60 * Second);
 ctx.strokeStyle = 'black';
 ctx.lineWidth = 1.5;
 ctx.moveTo(0, 10);
 ctx.lineTo(0, -60);
 ctx.stroke();
 ctx.closePath();
 ctx.restore(); //绘制时钟 
 ctx.save();
 ctx.beginPath();
 ctx.translate(150, 150); //和分钟一样。
 ctx.rotate(Math.PI * 2 / 12 * Hour+Math.PI * 2 / 60/12 * Minute+Math.PI * 2 / 60/60/12 * Second);
 ctx.strokeStyle = 'black';
 ctx.lineWidth = 2.5;
 ctx.moveTo(0, 8);
 ctx.lineTo(0, -35);
 ctx.stroke();
 ctx.closePath();
 ctx.restore();