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

对于H5来说，canvas可以说是它最有特色的一个地方了，有了它之后我们可以随意的在网页上画各种各样的图形，做一些小游戏啊什么的。canvas这个标签的用法，在网上也有特别多的教程了，这里就不作介绍了。今天我们就用canvas来做一个小小的时钟。

那么首先在这个页面里面我使用了两个canvas，一个用来绘制静态的时钟表盘和刻度，另一个用来绘制时钟的三个指针，然后用定位让他们重合到一起。然后这里没什么好说的，下面附上代码。

1. <canvas id="plate">   
2.         画表盘   
3. </canvas>   
4. <canvas id="needles">   
5.         画时针   
6. </canvas>  

1. var plate=document.getElementById('plate');   
2. var needles=document.getElementById('needles');   
3. needles.setAttribute('style','position:absolute;top:8px;left:8px;');  //这里因为chrome里面，body的magin值为8px，所以我这里就没设为0了。   
4. var cntP=plate.getContext('2d');   
5. var cntH=needles.getContext('2d');   
6. plate.width=800;   
7. plate.height=500;   
8. needles.width=800;   
9. needles.height=500;  

到了这里准备工作就做完了，下面就准备绘制时钟了。我先定义了一个绘制时钟表盘的构造函数。

1. function drawclock(cnt,radius,platelen,linewidth,numLen,NUMLEN){   
2.             this.cnt=cnt;   
3.             this.radius=radius;   
4.             this.platelen=platelen;   
5.             this.linewidth=linewidth;   
6.             this.numLen=numLen;   
7.             this.NUMLEN=NUMLEN;   
8.             this.getCalibCoor=function(i){     
9.                 //获得表盘刻度两端的坐标   
10.                 var X=200+this.radius*Math.sin(6*i*Math.PI/180);   
11.                 var Y=200-this.radius*Math.cos(6*i*Math.PI/180);   
12.                 var x=200+(this.radius-this.platelen)*Math.sin(6*i*Math.PI/180);   
13.                 var y=200-(this.radius-this.platelen)*Math.cos(6*i*Math.PI/180);   
14.   
15.                 // 获得分钟数字的坐标   
16.                 var numx=200+(this.radius-this.platelen-this.numLen)*Math.sin(6*i*Math.PI/180);   
17.                 var numy=200-(this.radius-this.platelen-this.numLen)*Math.cos(6*i*Math.PI/180);   
18.                 //获得小时数字的坐标   
19.                 var numX=200+(this.radius-this.platelen-this.NUMLEN)*Math.sin(6*i*Math.PI/180);     
20.                 var numY=200-(this.radius-