今天的时间比较充裕,心血来潮,为大家分享一个html5的小例子,希望对刚学html5或者是没学html5正准备学的“童鞋们”展示一个小案例,希望对你们的学习有帮助!高手嘛!请跳过吧!
我试水了画了一个时钟,和MDN的例子略有一点不同。I work it by myself!


Title
这里给出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了!(啦啦啦啦啦,手舞足蹈啦啦啦啦~~~)










