html画布时钟

最新推荐文章于 2024-08-25 09:57:22 发布

t1220130004

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量144

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/t1220130004/article/details/129246410

版权

该代码示例展示了如何利用HTML5的Canvas元素和JavaScript来创建一个实时更新的时钟动画。通过获取canvas节点，建立2D绘图上下文，计算角度并使用arc()、lineTo()等方法绘制时钟的刻度、秒针、分针和时针。

摘要由CSDN通过智能技术生成

<!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节点
        /** @type {HTMLCanvasElement} */
        let canvas = document.querySelector("#demo");

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

        let long = 5;
        let deg = Math.PI / 180
        // pen.moveTo(250+200,250);
        // pen.lineTo(250+200-long,250)
        function sc(){
            pen.beginPath()

            pen.arc(250, 250, 200, 0, 360 * deg);
            pen.strokeStyle="#999";
            pen.stroke()

        }
        // 刻度
        function ked(){
            for (let i = 0; i < 60; i++) {
                if (i%5==0) {
                    
                    pen.beginPath();
                    pen.moveTo(250 + 200 * Math.cos(i * 6 * deg), 250 + 200 * Math.sin(i * 6 * deg));
                    pen.lineTo(250 + 190 * Math.cos(i * 6 * deg), 250 + 190 * Math.sin(i * 6 * deg));
                    pen.strokeStyle="#000";
                    pen.stroke();
                    
                } else{
                    pen.beginPath()
                    pen.moveTo(250 + 200 * Math.cos(i * 6 * deg), 250 + 200 * Math.sin(i * 6 * deg));
                    pen.lineTo(250 + 195 * Math.cos(i * 6 * deg), 250 + 195 * Math.sin(i * 6 * deg));
                    pen.strokeStyle="#999";
                    pen.stroke()

                }

            }

        }
    //    秒针
        function mz(){
            let s=new Date();
            s=s.getSeconds();
            // console.log(s);
            pen.beginPath();    
            pen.moveTo(250 + 160 * Math.cos(s*6 * deg-90*deg), 250 + 160 * Math.sin(s*6 * deg-90*deg));
            pen.lineTo(250 , 250 );
            pen.strokeStyle="#000";
            pen.stroke();
        }
        // 分针
        function fz(){
            let s=new Date();
            s=s.getSeconds();
            let f=new Date();
            f=f.getMinutes();
            // console.log(f);
            pen.beginPath();    
            pen.moveTo(250 + 120 * Math.cos((f+s/60)*6 * deg-90*deg), 250 + 120 * Math.sin((f+s/60)*6 * deg-90*deg));
            pen.lineTo(250 , 250 );               
            pen.lineWidth=3
            pen.strokeStyle="#000";
            pen.stroke();
        }
        // 时针
        function sz(){
            let f=new Date();
            f=f.getMinutes();
            let h=new Date();
            h=h.getHours();
            pen.beginPath();    
            pen.moveTo(250 + 90 * Math.cos(30*(h+f/60) * deg-90*deg), 250 + 90 * Math.sin(30*(h+f/60) * deg-90*deg));
            pen.lineTo(250 , 250 );
            pen.lineWidth=4
            pen.strokeStyle="#000";
            pen.stroke();
        }
        // 更新画布+执行时钟
        setInterval(()=>{
            canvas.width=canvas.width;
            sc()
            ked()
            mz()
            fz()
            sz()
        },1000)
    </script>
</body>

</html>