绘制时钟

时钟动态效果的实现基于canvas画布的重绘，也就是说每秒都要在canvas画布上重新绘画一遍图形，在配合定时器即可实现动态效果。而实现此时钟主要有两个步骤，1是表盘的绘制，2是指针的绘制。

绘制时钟表盘

时钟表盘的刻度分为两种，一种是时刻度，一种是秒或分刻度。

1. 先使用cnavas创建空心的圆
   2，使用canvas中的旋转和画布状态来刻画表盘的时刻度。只需要每次都在表盘中心也就是圆心的正上方绘制一个刻度，然后将canvas画布旋转30deg重复此操作。
   

			cxt.save()// 重设画布的原点，以画布中心为原点cxt.translate(250,250)cxt.lineWidth = 5;// 设置旋转角度 参数是弧度Math.PI / 180  * 30cxt.rotate(Math.PI / 180 * 30 * 0)//第一次画布不旋转，随后每次旋转30degcxt.beginPath()cxt.moveTo(0,-180)cxt.lineTo(0,-195)cxt.stroke()cxt.closePath()cxt.restore()

上图效果是当canvas画布不旋转时绘画的第一个刻度，随后每绘画一个刻度完成，便需要将画布旋转30deg，然后在绘制刻度，而此操作需要重复多次，所以只需将以上代码放入循环之中便可。

		// 刻度,利用旋转// 时刻度for(var i = 0;i < 12;i++){// 保存当前画布状态cxt.save()// 重设画布的原点，以画布中心为原点cxt.translate(250,250)cxt.lineWidth = 5;// 设置旋转角度 参数是弧度Math.PI / 180  * 30cxt.rotate(Math.PI / 180 * 30 * i)cxt.beginPath()cxt.moveTo(0,-180)cxt.lineTo(0,-195)cxt.stroke()cxt.closePath()// 返回画布状态cxt.restore()}

3. 时刻度绘制完成，分刻度的绘制自然就简单许多，只需要改变旋转的角度。
   

		// 分刻度for(var i = 0;i < 60;i++){cxt.save()cxt.translate(250,250)cxt.lineWidth = 3;cxt.rotate(Math.PI / 180 * 6 * i)cxt.beginPath()cxt.moveTo(0,-188)cxt.lineTo(0,-195)cxt.stroke()cxt.closePath()cxt.restore()}

绘制时钟指针

在绘制指针之前要先获取当前的时间，指针的转动是随着时间的变化而实时转动的，所以指针的转动要通过当前时间的百分比来绘制的。
比如说现在时间为3点整，那么时针应该指向3点钟方向，而分针和秒针应该指向12点钟方向。3点钟方向与12点钟方向所成的夹角的度数为90deg，那么只需要绘制圆心点到正上方的一条实心线再将其旋转90deg就可以。

或者当时间是8点整是，同样只需要获取当前时间的百分比，获得当前时针指向的方向与12点钟方向的夹角（注意夹角的度数是逆时针方向来读取），获取度数后将画布旋转到此度数便可。

 		// 时针cxt.save()cxt.lineWidth = 5;cxt.strokeStyle = "black"cxt.translate(250,250)cxt.rotate(8 * 30 * Math.PI / 180)cxt.beginPath()cxt.moveTo(0,10)cxt.lineTo(0,-120)cxt.closePath()cxt.stroke()cxt.restore()

分针和秒针的绘制与时针的绘制是一样的道理，只需要改变canvas画布旋转的度数，比方说绘制一个小编写此篇博客时的指针状态。（19:48）

 		// 时针cxt.save()cxt.lineWidth = 5;cxt.strokeStyle = "black"cxt.translate(250,250)cxt.rotate(7.8 * 30 * Math.PI / 180)cxt.beginPath()cxt.moveTo(0,10)cxt.lineTo(0,-120)cxt.closePath()cxt.stroke()cxt.restore()// fen针cxt.save()cxt.lineWidth = 3;cxt.strokeStyle = "blue"cxt.translate(250,250)cxt.rotate(48 * 6 * Math.PI / 180)cxt.beginPath()cxt.moveTo(0,15)cxt.lineTo(0,-150)cxt.closePath()cxt.stroke()cxt.restore()// 秒针cxt.save()cxt.lineWidth = 1.5;cxt.strokeStyle = "red"cxt.translate(250,250)cxt.rotate(3 * 6 * Math.PI / 180)cxt.beginPath()cxt.moveTo(0,20)cxt.lineTo(0,-160)cxt.closePath()cxt.stroke()cxt.restore()

时钟指针的绘制这样就完成了，至于整体的绘制只需要将时，分，秒绘制时旋转的度数使用当前时间，再将整体放入定制器当中，每个1s便重新获取时间和绘制时钟指针的指向便实现了整体效果。