乐趣区

vue + canvas 实现炫酷时钟

如何基于 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…

退出移动版