用HTML5的canvas实现一个炫酷时钟效果

                    this.cnt.strokeStyle=’#ddd’;   
                    i%5==0&&(this.cnt.strokeStyle=’#aaa’)   
                    &&(this.cnt.lineWidth=this.linewidth*2);   
                    i%15==0&&(this.cnt.strokeStyle=’#999′)   
                    &&(this.cnt.lineWidth=this.linewidth*3);   
                    this.cnt.stroke();   
  
                    this.cnt.font=’10px Arial’;   
                    this.cnt.fillStyle=’rgba(0,0,0,.2)’;   
                    this.cnt.fillText(i,coorObj.numx-7,coorObj.numy+3);   
                    i%5==0&&(this.cnt.fillStyle=’rgba(0,0,0,.5)’)   
                        &&(this.cnt.font=’18px Arial’)   
                        &&(this.cnt.fillText(i/5,coorObj.numX-5,coorObj.numY+5));   
                }   
            };   
        }   
  
　　　　　　var clock=new drawclock(cntP,200,5,1,10,25); //实例化一个表盘对象   
　　　　　　clock.drawCalibration();  

这里最重要的部分就应该是获得刻度和数字绘制的坐标了。我把绘制刻度的起始点放在了表盘的边缘上，然后从表盘的半径上减去刻度的长度，就可以得到刻度终点的位置，然后利用角度和三角函数得到两个点的坐标。最后就可以绘制出表盘的刻度了。下面绘制出表盘上的数字也是一样的方法。我这里吧表盘的中心放在了（200,200）这里位置。到了这里我们就已经绘制好了一个静态的时钟表盘。