首先来看看效果
思路
利用计时器实时完成页面数据更新,计时器间隔为1000毫秒也就是1s的时间,同时利用
canvas.width = canvas.width 来删除之前的画布数据从而达到秒针不停走的动画效果。
步骤
1.进行画布设置(准备工作,同时deg表示角度换算,在后面运算在直接输入角度即可)
bin里面的东西是时钟的位置以及半径
<style>
canvas {
display: block;
margin: 0 auto;
border: 1px solid red;
}
</style>
<canvas></canvas>
<script>
let canvas = document.querySelector("canvas")
canvas.height = 550;
canvas.width = 800;
let ctx = canvas.getContext("2d");
let deg = Math.PI / 180
let bin = {
x: 400,
y: 300,
r: 200,
}
设置画布的大体轮廓
2.进行时钟轮廓绘制
//轮廓
ctx.beginPath();
ctx.arc(400, 300, 200, 0, 360 * deg, false);
ctx.stroke();
3.完成大刻度绘制并添加数字
通过for循环将数组arr中的数逐个放入表盘中(12个刻度瓜分圆,所以每个刻度间隔为30度)
qs.为什么第一个数为3而不是1?
是因为圆的绘制是从大概3点钟的位置开始的(如果想数组从1开始的话可以在划线的每个角度基础上减去90度)