vue + canvas 实现炫酷时钟

共计 1343 个字符，预计需要花费 4 分钟才能阅读完成。

如何基于 canvas 实现下图的样式

demo 演示地址：https://mirror198829.github.i…

canvas 绘制步骤思路

绘制表盘的（时针）刻度
绘制表盘的（分针）刻度
绘制表盘数字刻度
绘制时针、分针、秒针
绘制中心点
绘制秒针的尾部（优化部分）

实现所需要的知识点

画圆 ctx.arc(x,y,r, 开始弧度, 结束弧度)

画线 ctx.moveTo(x,y) ctx.lineTo(x1,y1)

直角坐标系的计算方法 x = x0 + Math.cos(角度)* 长度 y = y0 + Math.sin(角度)* 长度

定时器

如何实现（时针）刻度盘的绘制
思路：

已知直角坐标系的中心点坐标（x0,y0）即 canvas 画布中心点位置。设定 L = 长度
计算出时针的角度，通过直角坐标系的计算方法便得出时针刻度的位置。（12 个刻度进行循环便可全部绘制）

计算时针角度的方法：-90 + i * (360 / 12) 代码如下：
drawHoursScale(ctx, x0, y0, scaleNum, scaleW, maxL, minL) {
for (let i = 0; i < scaleNum; i++) {
let angel = -90 + i * (360 / scaleNum) // 角度
let [x1, y1] = [x0 + Math.cos(angel * Math.PI / 180) * maxL, y0 + Math.sin(angel * Math.PI / 180) * maxL]
let [x2, y2] = [x0 + Math.cos(angel * Math.PI / 180) * minL, y0 + Math.sin(angel * Math.PI / 180) * minL]
ctx.save()
ctx.beginPath()
ctx.lineWidth = scaleW
ctx.lineCap = “round”
ctx.moveTo(x1, y1)
ctx.lineTo(x2, y2)
ctx.stroke()
ctx.closePath()
ctx.restore()
}
}
如何绘制时针 / 分针 / 秒针
思路：

已知指针的起点坐标（x0,y0）
计算出指针的终点坐标（x1,y1）, 便可通过 lineTo 的方式进行绘制

如何计算终点坐标 与绘制刻度的思想式类似的
代码如下：
drawTimeNeedle(ctx, x0, y0, lineW, L, angel, color = ‘#000’) {
let [x, y] = [x0 + Math.cos(angel * Math.PI / 180) * L, y0 + Math.sin(angel * Math.PI / 180) * L]
ctx.save()
ctx.beginPath()
ctx.strokeStyle = color
ctx.lineWidth = lineW
ctx.lineCap = “round”
ctx.moveTo(x0, y0)
ctx.lineTo(x, y)
ctx.stroke()
ctx.closePath()
ctx.restore()
},
说明事项

时钟样式 参考 http://www.jq22.com/jquery-in…（可惜下载代码要币，一不做二不休自己写）
源码地址：https://github.com/Mirror1988…（喜欢的，请给作者 github 小星星）
demo 演示地址：https://mirror198829.github.i…