基于canvas的时钟表（vue）

基于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.