canvas实现一个经典时钟

最新推荐文章于 2024-07-13 09:43:34 发布

出门要带伞

最新推荐文章于 2024-07-13 09:43:34 发布

阅读量138

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_45467142/article/details/115042892

前端专栏收录该内容

17 篇文章

订阅专栏

效果如下
在这里插入图片描述

代码：

<html>
<head>
    <meta charset="utf8">
    <style>

    </style>
</head>
<body>
<div id="app">
    <canvas id="board" width="200"></canvas>
</div>
<script>
    function drawShell(b) {
        var board = document.getElementById('board');
        if (!board) {
            document.querySelector('#app').innerHTML = `<canvas id="board" width="200"></canvas>`;
            board = document.getElementById('board');
        } else {
            board.parentElement.removeChild(board);
            document.querySelector('#app').innerHTML = `<canvas id="board" width="200"></canvas>`;
            board = document.getElementById('board');
        }
        board.width = board.width * b;
        board.height = board.width;

        var context = board.getContext('2d');
        context.beginPath();
        var r = board.width / 2 - 5 * b;
        context.arc(board.width / 2, board.height / 2, r, 0, 2 * Math.PI, false);

        context.translate(board.width / 2, board.height / 2);
        context.stroke();

        var base = 2 * Math.PI / 60;
        for (var n = 0; n < 60; n++) {
            context.beginPath();
            var start_x = (r - 5 * b) * Math.cos(base * n);
            var start_y = (r - 5 * b) * Math.sin(base * n);
            context.moveTo(start_x, start_y);

            if (n == 0 || n % 5 == 0) {
                context.lineWidth = 2 * b;
                var number;
                if (n == 0 || n < 45 || n == 45) {
                    number = (n / 5) + 3;
                } else {
                    number = (n - 50) / 5 + 1;
                }
                context.textBaseline = 'middle';
                context.textAlign = 'center';
                var on_x = (r - 3 * 5 * b) * Math.cos(base * n);
                var on_y = (r - 3 * 5 * b) * Math.sin(base * n);
                context.fillText(number, on_x, on_y);
            } else {
                context.lineWidth = 1 * b;
            }
            var end_x = (r - 2 * 5 * b) * Math.cos(base * n);
            var end_y = (r - 2 * 5 * b) * Math.sin(base * n);
            context.lineTo(end_x, end_y);
            context.stroke();
        }

        var date = new Date();
        var t = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
        context.textAlign = 'center';
        context.textBaseline = 'middle';
        context.font = 10 * b + 'px 宋体';
        context.fillText(t, 0, board.height / 4);


    }

    function drawNeedle(b) {
        var board = document.getElementById('board');
        var context = board.getContext('2d');
        var r = board.width / 2 - 5 * b;
        var base = 2 * Math.PI / 60;

        var time = new Date();
        var hours = time.getHours();
        var min = time.getMinutes();
        var sec = time.getSeconds();
        drawHourNeedle();
        drawMinNeedle();
        drawSeconNeedle();

        function drawHourNeedle() {
            var x = (r - 5 * 5 * b) * Math.cos(base * ((hours - 3) * 5 + min / 12));
            var y = (r - 5 * 5 * b) * Math.sin(base * ((hours - 3) * 5 + min / 12));
            context.beginPath();
            context.moveTo(0, 0);
            context.lineWidth = 3;
            context.lineTo(x, y);
            context.stroke();
        }

        function drawMinNeedle() {
            var x = (r - 4 * 5 * b) * Math.cos(base * ((min - 15) + (sec / 60)));
            var y = (r - 4 * 5 * b) * Math.sin(base * ((min - 15) + (sec / 60)));
            context.beginPath();
            context.moveTo(0, 0);
            context.lineWidth = 2;
            context.lineTo(x, y);
            context.stroke();
        }

        function drawSeconNeedle() {
            var x = (r - 3 * 5 * b) * Math.cos(base * (sec - 15));
            var y = (r - 3 * 5 * b) * Math.sin(base * (sec - 15));
            context.beginPath();
            context.moveTo(0, 0);
            context.lineWidth = 3;
            context.lineTo(x, y);
            context.stroke();
        }
    }

    function drawClock(b) {
        drawShell(b);
        drawNeedle(b);
    }

    setInterval(function () {
        drawClock(1);
    }, 1000)
</script>
</body>
</html>