内容简介：思路：思路：
如何基于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()
}
}
如何绘制时针/分针/秒针
思路：
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...
以上所述就是小编给大家介绍的《vue + canvas 实现炫酷时钟》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
