canvas画时钟

最新推荐文章于 2025-07-27 20:22:41 发布

小李学软件

最新推荐文章于 2025-07-27 20:22:41 发布

阅读量226

点赞数

CC 4.0 BY-SA版权

分类专栏： js基础编文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/lzDevastator/article/details/105875060

js基础编专栏收录该内容

24 篇文章

订阅专栏

使用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>
    <style>
        body {
            background: #000;
        }

        * {
            margin: 0;
            padding: 0;
        }

        #clock {
            margin: 100px 550px;
            background: #000;
        }
    </style>
</head>
<body>
<canvas width="500" height="500" id="clock">
    您的浏览器不支持canvas
</canvas>
<script>
    var oClock = document.getElementById("clock");
    // 设置环境
    var clock = oClock.getContext('2d');
    // 时钟函数
    function drawClock() {
        clock.clearRect(0, 0, 500, 500);
        var time = new Date();
        var sec = time.getSeconds();
        var min = time.getMinutes();
        var hour = time.getHours();
        hour = hour + min / 60;
        /*if (hour>12){
            hour=12;
        }*/
        // console.log(hour)
        // 画出表盘轮廓
        clock.strokeStyle = "#00f";
        clock.lineWidth = 10;
        clock.beginPath();
        clock.arc(250, 250, 200, 0, 360);
        clock.stroke();
        clock.closePath();
        // 画出小时刻度
        for (let i = 1; i <= 12; i++) {
            clock.save();
            clock.lineWidth = 8;
            clock.strokeStyle = "#fff";
            // clock.font = "14px 黑体";
            clock.translate(250, 250);
            clock.rotate(i * 30 * Math.PI / 180);
            clock.beginPath();
            clock.moveTo(0, -170);
            clock.lineTo(0, -195);
            // clock.fillText(i,0,-150);
            clock.closePath();
            clock.stroke();
            clock.restore();

        }
        // 画出分钟刻度
        for (let i = 1; i <= 60; i++) {
            clock.save();
            clock.lineWidth = 5;
            clock.strokeStyle = "#0f0";
            // clock.font = "14px 黑体";
            clock.translate(250, 250);
            clock.rotate(i * 6 * Math.PI / 180);
            clock.beginPath();
            clock.moveTo(0, -180);
            clock.lineTo(0, -192);
            // clock.fillText(i,0,-150);
            clock.closePath();
            clock.stroke();
            clock.restore();

        }
        // 时针
        clock.save();
        clock.translate(250, 250);
        clock.rotate(hour * 30 * Math.PI / 180);
        clock.beginPath();
        clock.moveTo(-2, -90);
        clock.lineTo(-5, 15);
        clock.lineTo(5, 15);
        clock.lineTo(2, -90);
        clock.closePath();
        clock.fillStyle = "#0ff"
        clock.lineWidth = 3
        clock.fill();
        clock.strokeStyle = "purple";
        clock.stroke();
        clock.restore();
        // 分针
        clock.lineWidth = 2
        clock.save();
        clock.translate(250, 250);
        clock.rotate(min * 6 * Math.PI / 180);
        clock.beginPath();
        clock.moveTo(-2, -135);
        clock.lineTo(-5, 20);
        clock.lineTo(5, 20);
        clock.lineTo(2, -135);
        clock.closePath();
        clock.fillStyle = "#0ff"
        clock.lineWidth = 3
        clock.fill();
        clock.strokeStyle = "purple";
        clock.stroke();
        clock.restore();
        // 秒针
        clock.save();
        clock.translate(250, 250);
        clock.rotate(sec * 6 * Math.PI / 180);
        clock.beginPath();
        clock.moveTo(-2, -160);
        clock.lineTo(-3, 30);
        clock.lineTo(3, 30);
        clock.lineTo(2, -160);
        clock.closePath();
        clock.fillStyle = 'red';
        clock.fill();
        clock.strokeStyle = '#00f'
        clock.stroke();
        clock.beginPath();
        clock.arc(0, -145, 3, 0, 360);
        clock.closePath();
        clock.lineWidth = 2;
        clock.stroke();
        clock.restore();
        clock.beginPath();
        clock.arc(250, 250, 5, 0, 360, false);
        clock.strokeStyle = '#fff'
        clock.lineWidth = 5
        clock.stroke();
        clock.closePath();
    }
    setInterval(drawClock, 1000)
</script>
</body>
</html>