实现效果如下：

1.创建canvas元素

没有金刚钻就不要揽瓷器活

2.绘制双圆

var drawing=document.getElementById("drawing");  
    if(drawing.getContext){  
            var context=drawing.getContext("2d");  
            context.beginPath();  
        //绘制外圆  
        context.arc(100,100,99,0,2*Math.PI,false);  
            //绘制内圆  
            context.moveTo(194,100);  
            context.arc(100,100,94,0,2*Math.PI,false);  
            context.closePath();  
            context.stroke();    
}

3.绘制刻度

//绘制刻度  
context.font="bold 14px Arial";  
context.textAlign="center";  
context.textBaseline="midden";  
for(var i=1;i
function hous(x,y,r,h,context){  
              
            var gen3=Math.sqrt(3);  
            var rs=0.5*r;  
            switch(h)  
            {  
            case 1:  
              context.fillText("1",x+rs,y-rs*gen3);  
              break;  
            case 2:  
              context.fillText("2",x+gen3*rs,y-rs);  
              break;  
            case 3:  
              context.fillText("3",x+2*rs,y);  
              break;  
            case 4:  
              context.fillText("4",x+gen3*rs,y+rs);  
              break;  
            case 5:  
              context.fillText("5",x+rs,y+gen3*rs);  
              break;  
            case 6:  
              context.fillText("6",x,y+2*rs);  
              break;  
            case 7:  
              context.fillText("7",x-rs,y+gen3*rs);  
              break;  
            case 8:  
              context.fillText("8",x-gen3*rs,y+rs);  
              break;  
            case 9:  
              context.fillText("9",x-2*rs,y);  
              break;  
            case 10:  
              context.fillText("10",x-gen3*rs,y-rs);  
              break;  
            case 11:  
              context.fillText("11",x-rs,y-gen3*rs);  
              break;  
            case 12:  
              context.fillText("12",x,y-2*rs);  
              break;  
            default:  
              alert("请输入正确的时间刻度！");  
            }  
        }
4.取得时间对象
var oDate = new Date(); //实例一个时间对象；  
        var h=oDate.getHours(); //获取系统时，  
        var m=oDate.getMinutes(); //分  
        var s=oDate.getSeconds(); //秒  
           m+=s/60;  
           h+=m/60;
5.求得秒针与分针的坐标
function times(r,context,s){  
            context.moveTo(100,100);  
            var a=Math.PI*s/30;  
            var x=r*Math.sin(a)+100;  
            var y=100-r*Math.cos(a)  
            context.lineTo(x,y);  
        }
秒针与分针绕时钟一圈分别为一分钟（60S）和一小时（60min），故而每s秒，秒针就转动了a=2π×s÷60弧度，再根据三角函数可以计算出其坐标了
6.求得时针的坐标
function timeh(r,context,h){  
        context.moveTo(100,100);  
           var a=Math.PI*h/6;  
        var x=r*Math.sin(a)+100;  
        var y=100-r*Math.cos(a)  
        context.lineTo(x,y);  
    }
7.绘制指针
function time(context,r){  
              //描边路径  
            context.beginPath();  
            var oDate = new Date(); //实例一个时间对象；  
        var h=oDate.getHours(); //获取系统时，  
        var m=oDate.getMinutes(); //分  
            var s=oDate.getSeconds(); //秒  
            m+=s/60;  
            h+=m/60;  
            //绘制小圆  
            context.moveTo(103,100);  
            context.arc(100,100,3,0,2*Math.PI,false);  
        //绘制秒针  
            times(r,context,s);  
            // 绘制分针  
            times(r-15,context,m);  
            //绘制时针  
            timeh(r-30,context,h);  
            context.closePath();  
            context.stroke();  
              
}
8.动画调用
var r=94/Math.sqrt(2)-1;   
setInterval(function(){  
            context.clearRect(100-r,100-r,2*r,2*r);  
             time(context,r-1);  
           },16.7);
完整代码
html>  
  
  
      
      
  
  
    没有金刚钻就不要揽瓷器活