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

case 1: angle=d/60000%60/60*360*Math.PI/180;

break; case 2:

angle=d/1000%60/60*360*Math.PI/180; break;

} var coorobj=this.getNeedleCoor(angle);

this.cnt.beginPath(); this.cnt.moveTo(coorobj.x,coorobj.y);

this.cnt.lineTo(coorobj.X,coorobj.Y); // this.cnt.closePath();

this.cnt.lineWidth=this.lineWidth;

this.cnt.strokeStyle=this.strokeStyle; this.cnt.lineCap=this.lineCap;

this.cnt.stroke(); }

}

这里有两个地方需要说一下：1、在我们获得当前时间的的毫秒数，然后转换为小时的时候，对24取模计算出当天的小时数的时候，这里需要加上8。2、如果想要使用lineCap这个属性吗，那么上面在设置路径的时候，不要用closePath()。

到了这里我们还需要一个来绘制指针的方法，并且让指针看起来能够转动：