JS利用canvas画布功能画时钟

首先来看看效果

思路

     利用计时器实时完成页面数据更新，计时器间隔为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度）