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

2019-01-28 14:50:36于海丽

下面我又定义了一个绘制时钟指针的构造函数。

JavaScript Code复制内容到剪贴板
  1. function clockNeedle(cnt,R,lineWidth,strokeStyle,lineCap,obj){                this.R=R;   
  2.             this.cnt=cnt;                this.lineWidth=lineWidth;   
  3.             this.strokeStyle=strokeStyle;                this.lineCap=lineCap;   
  4.             this.obj=obj;                this.getNeedleCoor=function(i){   
  5.                 var X=200+this.R*0.8*Math.sin(i); //起点的坐标                    var Y=200-this.R*0.8*Math.cos(i);   
  6.                    var x=200-20*Math.sin(i); //终点的坐标   
  7.                 var y=200+20*Math.cos(i);                    return {X:X,Y:Y,x:x,y:y};   
  8.             };                this.drawNeedle=function(){   
  9.                 var d=new Date().getTime();                    var angle;   
  10.                 switch(this.obj){                        case 0:   
  11.                     angle=(d/3600000%24+8)/12*360*Math.PI/180;                        break;