好几天没有进行每日一练了，除了工作原因之外，还有因为近期看到同事发的各种刚入职场的学弟学妹们的简历，被上面写的各种掌握的技能所刺激了。虽然可能不是那么尽实，但着实的push自己一把，决定先把canvas啃下来。

我试水了画了一个时钟，和MDN的例子略有一点不同。I work it by myself！

这里给出MDN的例子页：

和MDN的例子不同的是，MDN每次都要重绘整个时钟，而我的做法则将时钟表盘和3个指针分离开来，只需重绘指针。

我觉得这里有两个难点：一个是计算时分针的角度（分针走的同时，时针也会走一些角度）。一个是重绘指针的区域。

canvasRendingContext2D.rotate(angle)

这里Math.PI是半圆，半圆有6个小时，所以Math.PI/6是一个小时时针所走的弧度。

因为分针转完一圈，时针就走完1/12圈，所以计算时针对于minute所走的弧度可以这么计算：Math.PI*2/60*12 =>Math.PI/360

秒针同理。

第二，重绘指针。

若不重绘指针，1分钟之后，你将得到满是360度秒针的时钟。像这样：

那么如何才能重绘指针部分的区域呢？

我想到了裁剪。然后在裁剪的区域重绘。

这样就OK了！（啦啦啦啦啦，手舞足蹈啦啦啦啦~~~）