基于canvas的时钟表的实现
实现一个简易的时钟表主要包含以下几块内容:
1、表盘数字的实现
2、秒针功能实现(一秒转动Math.PI2/60 度)
3、分针功能实现 (一分钟转动Math.PI2/60 度)
4、时针功能实现(一小时转动Math.PI*2/12 度)
5、当前具体日期功能实现(new Date())
6、通过setInterval设定一个定时器,每隔一秒去获得最新的时间
细节提醒:
1)为了实现分针以及时针的实时转动,在计算分针、时针转动角度的时候联动带上对应的当前秒和当前分钟数。
//计算时间(分、时、秒)
let time = new Date()
let secondes = time.getSeconds()
let minutes = time.getMinutes()
let hours = time.getHours()
hours = hours > 12 ? hours -12 : hours
let minute = minutes + secondes / 60
let hour = hours + minutes / 60
let monthStr = (time.getMonth() +1) > 9 ? time.getMonth() + 1 : '0'+ (time.getMonth() + 1)
let dayStr = time.getDay() > 9 ? time.getDay() : '0'+time.getDay()
2)实现转动使用了canvas中的rotate的方法,其转动起点为3点钟方向。故在旋转角度计算的时候要减去Math.PI/2。
ctx.rotate(Math.PI*2/12*hour - Math.PI/2)
ctx.rotate(Math.PI*2/60*minute - Math.PI/2)
ctx.rotate(Math.PI*2/60*secondes - Math.PI/2)
3)实现表盘数字时候,需要去计算数字对应转动的角度。这里主要是利用正弦定理和余弦定理来进行计算。
for(let i = 1;i<13;i++) {
let theta = Math.PI*2/12*i - Math