在页面上加入canvas标签：
<body> <canvas id="c1" width="600px" height="600px"> <span>不支持canvas浏览器</span> </canvas> <!--默认：宽300 高150--> </body>
js部分：
绘制秒的刻度的思路是先用oGC.stroke()循环画60个6°的扇形，将它们拼接成一整个圆，然后用oGC.fill()画一个实心的圆，半径比之前拼接的那个圆短，用实心的圆挡住中间多余的线，这样秒的刻度就画出来了，以此类推可以画出分的刻度；
让时钟自动走起来：获取new Date()下的真实时、分、秒时间，然后用‘角度*Math.PI/180=弧度’的公式换算成弧度，赋值给时针、分针、秒针的圆中对应的弧度值，注意：弧度的变化是沿着顺时针的方向增加的，也就是在秒针指向0秒时，它的弧度是-90°。最后设置一个定时器，每隔1s调用一次封装的函数：
<script> window.onload = function(){ var oC = document.getElementById('c1'); var oGC = oC.getContext('2d'); function toDraw(){ var a = 200; var b = 200; var r = 100; oGC.clearRect(0,0,oC.width,oC.height); //获取时间 var oDate = new Date(); var oHour = oDate.getHours(); var oMin = oDate.getMinutes(); var oSec = oDate.getSeconds(); var oHourvalue = (-90 + oHour*30 + oMin/2 )*Math.PI/180; var oMinvalue = (-90 + oMin*6 )*Math.PI/180; var oSecvalue = (-90 + oSec*6 )*Math.PI/180; //绘制秒的刻度 oGC.beginPath(); for(var i=0;i<60;i++){ oGC.moveTo(a,b); oGC.arc(a,b,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false); } oGC.closePath(); oGC.stroke(); oGC.fillStyle = 'white'; oGC.beginPath(); oGC.moveTo(a,b); oGC.arc(a,b,r*19/20,0,360*Math.PI/180,false); oGC.closePath(); oGC.fill(); //绘制分的刻度 oGC.lineWidth = 3; oGC.beginPath(); for(var i=0;i<12;i++){ oGC.moveTo(a,b); oGC.arc(a,b,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false); } oGC.closePath(); oGC.stroke(); oGC.fillStyle = 'white'; oGC.beginPath(); oGC.moveTo(a,b); oGC.arc(a,b,r*17/20,0,360*Math.PI/180,false); oGC.closePath(); oGC.fill(); //绘制时针 oGC.lineWidth = 4; oGC.beginPath(); oGC.moveTo(a,b); oGC.arc(a,b,r*13/20,oHourvalue,oHourvalue,false); oGC.closePath(); oGC.stroke(); //绘制分针 oGC.lineWidth = 2; oGC.beginPath(); oGC.moveTo(a,b); oGC.arc(a,b,r*18/20,oMinvalue,oMinvalue,false); oGC.closePath(); oGC.stroke(); //绘制秒针 oGC.beginPath(); oGC.moveTo(a,b); oGC.arc(a,b,r*19/20,oSecvalue,oSecvalue,false); oGC.closePath(); oGC.stroke(); }； setInterval(toDraw,1000); }; </script>