首先第一步。

然后

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

 

定义一个绘制时钟的函数通过计时器每秒调用一次，默认首先通过函数名调用一次然后通过计时器调用。因为如果直接一开始用计时器调用就会比实际时间慢1s

drawfun(); setInterval(drawfun,1000);

 

函数体内容：

1).每次调用前清除一次画布，所以放在第一行。

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

2).绘制时钟的外边框和圆心，很容易就不解释了。

//时钟框和圆心 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();

3).绘制小时和分钟的刻度。

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

4).绘制小时数

(var i=0;i<60;i++){ ctx.beginPath(); hudu = (2*Math.PI / 360) * 6 * i; var X = 150 + Math.sin(hudu) * 80 - 3.5; (i%5==0){ if(i==0){ ctx.fillText("12",X-3,Y); }else{ ctx.fillText("" + i / 5 + "",X,Y); } ctx.stroke(); } }

5).最后绘制时分秒指针

var date = new Date(); Minute = date.getMinutes(); Second = date.getSeconds(); 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/60 * Minute+Math.PI * 2 / 60/60/60 * Second); ctx.strokeStyle = 'black'; ctx.lineWidth = 2.5; ctx.moveTo(0, 8); ctx.lineTo(0, -35); ctx.stroke(); ctx.closePath(); ctx.restore();

本人也是刚开始学习canvas。如有不对，请多包涵和指出。谢谢！