canvas 时钟实现使用三角函数实现canvas 时钟，对表盘、刻度、时针、分针、秒针的实现。三角函数对于前端布局有很

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="400" height="400" id="canvas" style="background: #000000"></canvas>
<script>
    let canvas = document.getElementById('canvas');
    let cxt = canvas.getContext('2d');
    let date = new Date();
    let secondsRadian = date.getSeconds() * (2 * Math.PI / 60);  // 秒针弧度
    let minuteRadian = date.getMinutes() * (2 * Math.PI / 60);   // 分针弧度
    let hourRadian = date.getHours() * (2 * Math.PI / 12);       // 时针弧度
    let degree = (2 * Math.PI) / 12;                                   // 圆形分成12份每一份的弧度（小时弧度）

    // 全局属性
    cxt.strokeStyle = '#ffffff';
    cxt.fillStyle = '#ffffff';

    function clockDial() {
        // 画圆
        cxt.save();
        cxt.beginPath();
        cxt.lineWidth = 2;
        cxt.arc(200, 200, 170, 0, Math.PI * 2);
        cxt.stroke();
        cxt.translate(200, 200);

        // 文字属性
        cxt.font = '15px Arial';
        cxt.textAlign = 'center';
        cxt.textBaseline = 'middle';
        // 当前日期及时间
        cxt.fillText(`${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}  ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`, 0,50 );
        for (let i = 1; i <= 12; i++) {
            // 时钟文字
            // 移动坐标 + 正弦 or 余弦 * 大小
            cxt.fillText(i, Math.cos((i - 3) * degree) * 150, 2 + Math.sin((i - 3) * degree) * 150);
        }

        // 刻度
        for (let i = 0; i < 60; i++) {
            cxt.save();
            if (i % 5 === 0) {
                // 时刻度
                cxt.beginPath();
                cxt.rotate(i * (2 * Math.PI / 60));
                cxt.lineWidth = 4;
                cxt.moveTo(0, 160);
                cxt.lineTo(0, 170);
                cxt.stroke();
            } else {
                // 分刻度
                cxt.beginPath();
                cxt.rotate(i * (2 * Math.PI / 60));
                cxt.moveTo(0, 163);
                cxt.lineTo(0, 170);
                cxt.stroke();
            }
            cxt.restore()
        }
        cxt.restore();
    }

    function pointer(seconds, minute, hour) {
        // 秒针
        parameter(seconds,2,-150)

        // 分针
        parameter(minute,3,-120)

        // 时针
        parameter(hour,5,-90)
    }
    
    function parameter(num,lineWidth,y) {
        cxt.save();
        cxt.beginPath();
        cxt.translate(200, 200);
        cxt.rotate(num);
        cxt.lineCap = 'round';
        cxt.lineWidth = lineWidth;
        cxt.moveTo(0, 12);
        cxt.lineTo(0, y);
        cxt.stroke();
        cxt.restore();
    }

    function drawing() {
        cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height);
        clockDial();
        pointer(secondsRadian, minuteRadian, hourRadian);
    }

    drawing();
    setInterval(() => {
        date = new Date();
        secondsRadian = date.getSeconds() * (2 * Math.PI / 60);
        minuteRadian = date.getMinutes() * (2 * Math.PI / 60);
        hourRadian = date.getHours() * (2 * Math.PI / 12);
        return drawing()
    }, 1000);
</script>
</body>
</html>