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

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

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

2. 画表盘
5. 画时针

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

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

1. functiondrawclock(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. varX=200+this.radius*Math.sin(6*i*Math.PI/180);
11. varY=200-this.radius*Math.cos(6*i*Math.PI/180);
12. varx=200+(this.radius-this.platelen)*Math.sin(6*i*Math.PI/180);
13. vary=200-(this.radius-this.platelen)*Math.cos(6*i*Math.PI/180);
15. //获得分钟数字的坐标
16. varnumx=200+(this.radius-this.platelen-this.numLen)*Math.sin(6*i*Math.PI/180);
17. varnumy=200-(this.radius-this.platelen-this.numLen)*Math.cos(6*i*Math.PI/180);
18. //获得小时数字的坐标
19. varnumX=200+(this.radius-this.platelen-this.NUMLEN)*Math.sin(6*i*Math.PI/180);
20. varnumY=200-(this.radius-this.platelen-this.NUMLEN)*Math.cos(6*i*Math.PI/180);
21. return{ X:X,Y:Y,x:x,y:y,numx:numx,numy:numy,numX:numX,numY:numY} ;
22. } ;
23. this.drawCalibration=function(){ //画刻度
24. for(vari=0,coorObj; i

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！