Ω

时钟

运行的时钟,分两层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格是一小时.

分针可以不必像时针那样体现秒针走了多少,例如半分钟时,分针要处在两格子中间.这个不必,当秒针走一圈时,让分针

跳一格就行.

不支持canvas

不支持canvas