运行的时钟,分两层canvas,底层是刻度,不动的.上层是时分秒,动的.
时刻度12份,每份30度.分刻度60份,每份6度,秒刻度60份,每份6度
对于秒针,每过一秒,走6度.
对于分针,每过一分,走6度.
对于时针,每过12分钟,走6度.
每帧会获取当前JS时间,取出时分秒,然后计算时钟针的所在位置
假如获取的时间是9点12分20秒.
那么,时针位置是9*30度,(12点为起点),将画布旋转 9 * Math.Pi / 6.然后竖直画时针线.(0,0)(0,len)
时针的位置和分有关系,9点12分时,时针不能只是正对着9点,而需要体现过了12分这段位置
所以,旋转 9 * Math.Pi / 6的同时,还要加上 12 * Math.Pi / 6 / 12.小时刻度里的每一格相当于12
分钟,所以9点12分时,时针要处于9点,并且走过一格的位置.
12分20秒,将画布旋转12 * Math.Pi / 30 和 20 * Math.PI / 30.然后竖直画分针秒针线.(0,0)(0,len)
分和秒的步进都是6度,秒针走60格是1分钟,此时分针走1格,分针走60格是一小时.
分针可以不必像时针那样体现秒针走了多少,例如半分钟时,分针要处在两格子中间.这个不必,当秒针走一圈时,让分针
跳一格就行.