canvas绘制电子时钟

最新推荐文章于 2024-07-02 22:34:09 发布

Violet丶Evergarden

最新推荐文章于 2024-07-02 22:34:09 发布

阅读量318

点赞数

本文链接：https://blog.csdn.net/Vollerei/article/details/103721696

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="800" height="800"></canvas>
    <script>
        function clock() {
            var now = new Date();

            var ctx = document.getElementById('canvas').getContext('2d');
            //+100
            ctx.save();
            ctx.clearRect(0, 0, 250, 250);
            //改变坐标系原点位置
            ctx.translate(175, 175);
            //缩放
            ctx.scale(0.4, 0.4);
            ctx.rotate(-Math.PI / 2);
            ctx.storkStyle = "black";
            ctx.fillStyle = "white";
            ctx.lineWidth = 8;
            //线帽样式(圆形)
            ctx.lineCap = "round";

            //hour marks
            ctx.save();
            for (var i = 0; i < 12; i++) {
                ctx.beginPath();
                ctx.rotate(Math.PI / 6);
                ctx.moveTo(200, 0);
                ctx.lineTo(220, 0);
                ctx.stroke();
            }
            ctx.restore();

            //minute marks
            ctx.save();
            ctx.lineWidth = 5;
            for (i = 0; i < 60; i++) {
                if (i % 5 != 0) {
                    ctx.beginPath();
                    ctx.moveTo(217, 0);
                    ctx.lineTo(220, 0);
                    ctx.stroke();
                }
                ctx.rotate(Math.PI / 30);
            }
            ctx.restore();

            var sec = now.getSeconds();
            var min = now.getMinutes();
            var hr = now.getHours();
            hr = hr >= 12 ? hr - 12 : hr;

            ctx.fillStyle = "black";


            //write hours
            ctx.save();
            ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) * sec)
            ctx.lineWidth = 14;
            ctx.beginPath();
            ctx.moveTo(-20, 0);
            ctx.lineTo(90, 0);
            ctx.stroke();
            ctx.restore()

            // write Minutes
            ctx.save();
            ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec)
            ctx.lineWidth = 10;
            ctx.beginPath();
            ctx.moveTo(-28, 0);
            ctx.lineTo(152, 0);
            ctx.stroke();
            ctx.restore();

            // Write seconds
            ctx.save();
            ctx.rotate(sec * Math.PI / 30);
            ctx.strokeStyle = "#D40000";
            ctx.fillStyle = "#D40000";
            ctx.lineWidth = 6;
            ctx.beginPath();
            ctx.moveTo(-30, 0);
            ctx.lineTo(160, 0);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(170, 0, 10, 0, Math.PI * 2, true);
            ctx.stroke();
            ctx.fillStyle = "rgba(0,0,0,0)";
            ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
            ctx.fill();
            ctx.restore();

            ctx.beginPath();
            ctx.lineWidth = 14;
            ctx.strokeStyle = '#325FA2';
            ctx.arc(0, 0, 242, 0, Math.PI * 2, true);
            ctx.stroke();
            ctx.restore();

            window.requestAnimationFrame(clock);
        }
        window.requestAnimationFrame(clock);
    </script>
</body>

</html>