使用js和canvas写一个时钟

最新推荐文章于 2024-09-04 20:18:34 发布

HaiRong_21

最新推荐文章于 2024-09-04 20:18:34 发布

阅读量188

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/HaiRong_21/article/details/108448368

版权

使用js和canvas写一个时钟
在这里插入图片描述

<!DOCTYPE html>`
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id='canvas' width='600' height='600' style="border: 1px solid red;"></canvas>
    <script>
        /** @type {HTMLCanvasElement} */
        let canvas = document.querySelector("#canvas");
        let ctx = canvas.getContext("2d");
        let deg = Math.PI / 180;

        let HourR = 100;
        let MinutesR = 135;
        let SecondsR = 170;
        setInterval(function () {

            canvas.width = canvas.width;
            ctx.arc(300, 300, 200, 0, Math.PI * 2)
            ctx.fillStyle = 'rgba(10,100,30,0.2)'
            ctx.strokeStyle = 'red'
            //获取当前时间
            let dt = new Date()
            let Hour = dt.getHours()
            let Minutes = dt.getMinutes()
            let Seconds = dt.getSeconds()
            //时钟
            ctx.moveTo(300, 300);
            let xx = HourR * (Math.sin(Hour * 30 * deg))
            let yy = HourR * (Math.cos(Hour * 30 * deg))
            ctx.lineTo((300 + xx), (300 - yy))
            //分钟和秒钟
            function move(time, R) {
                ctx.moveTo(300, 300);
                xx = R * (Math.sin(time * 6 * deg))
                yy = R * (Math.cos(time * 6 * deg))
                ctx.lineTo((300 + xx), (300 - yy))
            }
            //小时指针
            for (let m = 0; m < 12; m++) {
                let xx = 190 * (Math.sin(m * 30 * deg))
                let yy = 190 * (Math.cos(m * 30 * deg))
                let xx1 = 200 * (Math.sin(m * 30 * deg))
                let yy1 = 200 * (Math.cos(m * 30 * deg))
                ctx.moveTo((300 + xx), (300 - yy));
                ctx.lineTo((300 + xx1), (300 - yy1))
            }

            move(Seconds, SecondsR)
            move(Minutes, MinutesR)
            ctx.fill()
            ctx.stroke()
        }, 1000)


    </script>
</body>

</html>