面试官：你能实现一个时钟吗？

还记得2019年的时候，那时候面试了一家公司，其实就两道题，很简单，奈何当时基础确实太差，其中一道是能写出一个时钟吗，我当时当然是不会的，然后挂了，现在看来也确实简单，实现一下。

其实一个手表很简单的，无非是先画一个外圆盘，然后画时针刻度，画分针刻度，画时针、分针、秒针就完事了，当然需要一点点的canvas基础（但不多，哈哈）。

<canvas id="canvas" width="600" height="600"></canvas>

<script>
    function clock() {
        let ctx = document.getElementById('canvas').getContext('2d');

        // 获取时间
        let time = new Date();
        let hour = time.getHours() % 12;  //当前的小时
        let minute = time.getMinutes();   //当前分钟
        let second = time.getSeconds();   //当前秒
        // 每次指针旋转需要清空一下画布，不然会将以前的遗留下来
        ctx.clearRect(0, 0, 600, 600)  
        ctx.save()
        // 将圆点由300，300变为0，0
        ctx.translate(300, 300)
        ctx.lineCap = 'round';  //指针设为圆角
        ctx.save()

        // 先画一个外圆 
        ctx.beginPath()
        ctx.strokeStyle = '#325FA2';
        ctx.lineWidth = 5;
        ctx.arc(0, 0, 100, 0, Math.PI * 2)
        ctx.stroke()

        // DW 文字
        ctx.font = "24px serif";
        ctx.fillText("D W", -20, -50);

        // 画时针刻度
        ctx.lineWidth = 3
        for (let i = 0; i < 12; i++) {
            ctx.rotate(2 * Math.PI / 12)  //360度分12份
            ctx.beginPath();
            // 第一个刻度是x轴水平 也就是3点 不要搞错了哦
            ctx.moveTo(85, 0)  
            ctx.lineTo(100, 0)
            ctx.stroke()
        }

        // 画分针刻度
        ctx.lineWidth = 1
        for (let i = 0; i < 60; i++) {
            ctx.rotate(2 * Math.PI / 60)  //360度分60份
            ctx.beginPath();
            ctx.moveTo(90, 0)
            ctx.lineTo(100, 0)
            ctx.stroke()
        }

        // 画时针
        //计算偏转度数  起始在3点钟方向，所以需要减去90度，回到12点方向
        const hourRound = 2 * Math.PI / 12 * hour + 2 * Math.PI / 12 * (minute / 60) - Math.PI / 2
        ctx.rotate(hourRound)
        ctx.beginPath();
        ctx.lineWidth = 10
        ctx.strokeStyle = "black";
        ctx.moveTo(-20, 0)
        ctx.lineTo(50, 0)
        ctx.stroke();


        // 画分针
        // 计算度数  起始在3点钟方向，所以需要减去90度，回到12点方向
        const minuteRound = 2 * Math.PI / 60 * minute - Math.PI / 2
        ctx.rotate(minuteRound);
        ctx.beginPath();
        ctx.lineWidth = 7;
        ctx.moveTo(-20, 0)
        ctx.lineTo(70, 0)
        ctx.stroke();


        // 画秒针
        const secondRound = 2 * Math.PI / 60 * second - Math.PI / 2
        ctx.rotate(secondRound);
        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#D40000";
        ctx.moveTo(-20, 0)
        ctx.lineTo(85, 0)
        ctx.stroke();

        ctx.restore()
        ctx.restore();
    }


    setInterval(()=>{
        clock()
    },1000)



</script>