利用canvans画布实现时钟

最新推荐文章于 2024-06-10 23:30:57 发布

mine01*

最新推荐文章于 2024-06-10 23:30:57 发布

阅读量57

点赞数

文章标签： html javascript dreamweaver Powered by 金山文档

本文链接：https://blog.csdn.net/m0_64181490/article/details/129249079

版权

总的来说就是改变坐标轴的位置和改变的度数，利用定时器来控制自动转动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo {
            display: block;
            /* border: 1px solid #999; */
            margin: auto;
        }
    </style>
</head>

<body>
    <canvas id="demo" height="500" width="500"></canvas>

    <script>
        // 1.获取canvas节点
        let canvas = document.querySelector("#demo");

        // 2.创建执行上下文
        let pen = canvas.getContext("2d")

        //全局变量
        let x0 = 250;
        let y0 = 250;
        let r = 200;
        let sw = 150;
        let mw = 120;
        let hw=100;
        let s = 0;
        let m = 0;
        let h=0;
        let deg = Math.PI / 180


        function drawBp() {
            pen.beginPath()
            pen.strokeStyle = "#999"
            pen.arc(250, 250, 200, 0, 360 * deg)

            for (let i = 0; i < 60; i++) {
                // 对5取余  来找到大一点得刻度线  
                if (i % 5 == 0) {
                    pen.moveTo(x0 + r * Math.cos(6 * i * deg), y0 + r * Math.sin(6 * i * deg))
                    pen.lineTo(x0 + (r - 20) * Math.cos(6 * i * deg), y0 + (r - 20) * Math.sin(6 * i * deg))
                } else {
                    pen.moveTo(x0 + r * Math.cos(6 * i * deg), y0 + r * Math.sin(6 * i * deg))
                    pen.lineTo(x0 + (r - 10) * Math.cos(6 * i * deg), y0 + (r - 10) * Math.sin(6 * i * deg))
                }
            }
            pen.stroke()
        }


        // 绘制秒针
        function drawS() {
            pen.beginPath();
            pen.strokeStyle = "#666";
            pen.lineWidth = 2;
            pen.moveTo(x0 + sw * Math.cos(s * 6 * deg - 90 * deg), y0 + sw * Math.sin(s * 6 * deg - 90 * deg));
            pen.lineTo(x0, y0);
            pen.stroke();
        }

        // 绘制分针
        function drawM(){
            pen.beginPath();
            pen.strokeStyle = "#333";
            pen.lineWidth = 3;
            pen.moveTo(x0 + mw * Math.cos((m+s/60)* 6 * deg - 90 * deg), y0 + mw * Math.sin((m+s/60) * 6 * deg - 90 * deg));
            pen.lineTo(x0, y0);
            pen.stroke();
        }

        // 绘制时针
        function drawH(){
            pen.beginPath();
            pen.strokeStyle = "block";
            pen.lineWidth = 5;
            pen.moveTo(x0 + hw * Math.cos((h+m/60)*30 * deg +270 * deg), y0 + hw * Math.sin((h+m/60)* 30 * deg + 270 * deg));
            pen.lineTo(x0, y0);
            pen.stroke();
        }
        //定时器让指针自动转动
        setInterval(() => {
            canvas.width = canvas.width;
            let time = new Date();
            s = time.getSeconds();
            m = time.getMinutes();
            h=(time.getHours())-12;
            console.log(h);

            drawBp();
            drawS();
            drawM();
            drawH() 
        }, 1000)

    </script>
</body>
</html>