学习canvas的使用,利用canvas来实现一些动画效果
-
保存最初的状态
-
将坐标轴设置为canvas的中心为坐标原点(便于计算)
-
画出外圆
- 开始一条新的路径
-
画出时刻
- 开始一条新的路径
- 并以3点为起点进行顺时针画时刻(12个数字每个数字30度)
- 根据正余弦求x,y的值(将度数转化为弧度)
- 并在相应的位置填写数字
-
画出刻度盘
- (60个刻度盘每个刻度盘6度)其余的和时刻一样
-
画出时针、画出分针、画出秒针
- 所有都要保存画之前的状态,这样能够让时针,分针,秒针初始位置相同不会导致后面的位置错误
- 所有指针指向12的位置,然后根据弧度进行旋转
- 时针弧度 => 时针的弧度+分针弧度/12
- 分针弧度 => 分针弧度+秒针弧度/60
- 秒针弧度 => 秒针弧度
-
画出圆心
- 放在最后画要不然会被时针,分针,秒针给挡住的
- 证明有层级