html5 实现时钟

最新推荐文章于 2024-08-01 16:15:33 发布

释汐宇辰

最新推荐文章于 2024-08-01 16:15:33 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： Html5 Canvas 时钟

本文链接：https://blog.csdn.net/chengjiamei/article/details/65075974

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Tests</title>
    <script type="text/javascript">
        ///格式化数字
        function PrefixInteger(num, n) {
            return (Array(n).join(0) + num).slice(-n);
        }
        function test() {
            var c = document.getElementById("drawing");
            if (c.getContext) {
                var date = new Date();
                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();

                var context = c.getContext("2d");
                context.clearRect(0, 0, c.width, c.height);
                context.textAlign = "center";
                context.textBaseline = "middle";
                var strolewwww = context.strokeWidth;
                var ang = 0;
                var cx = 0;
                var cy = 0;
                context.beginPath();
                context.fillText(PrefixInteger(12,2), 100, 30);
                context.fillText(PrefixInteger(3,2), 170, 100);
                context.fillText(PrefixInteger(9,2), 30, 100);
                ///中心旋转
                context.save();
                context.setTransform(1, 0, 0, 1, 0, 0);
                var angleInRadians = 30 * (12) * Math.PI / 180;
                context.translate(.5 * c.width, .5 * c.height);//设置旋转中心点
                context.rotate(angleInRadians);
                context.fillText(PrefixInteger(6 ,2), 0, 70);
                context.restore();

                context.fillStyle = "black";
                for (var i = 1; i <= 60; i++) {
                    if (i <= 12) {
                        ang = i / 12;
                        cx = 90 * Math.cos(Math.PI / 2 - 2 * Math.PI * ang);
                        cy = 90 * Math.sin(Math.PI / 2 - 2 * Math.PI * ang);
                        context.moveTo(100 + cx, 100 - cy)
                        cx = 80 * Math.cos(Math.PI / 2 - 2 * Math.PI * ang);
                        cy = 80 * Math.sin(Math.PI / 2 - 2 * Math.PI * ang);
                        context.lineTo(100 + cx, 100 - cy)


                    }
                    if (i % 5 != 0) {
                        ang = i / 60;
                        cx = 90 * Math.cos(Math.PI / 2 - 2 * Math.PI * ang);
                        cy = 90 * Math.sin(Math.PI / 2 - 2 * Math.PI * ang);
                        context.moveTo(100 + cx, 100 - cy)
                        cx = 85 * Math.cos(Math.PI / 2 - 2 * Math.PI * ang);
                        cy = 85 * Math.sin(Math.PI / 2 - 2 * Math.PI * ang);
                        context.lineTo(100 + cx, 100 - cy)
                    }
                }


                context.moveTo(190, 100);
                context.arc(100, 100, 90, 0, 2 * Math.PI, false);
                context.moveTo(194, 100);
                context.arc(100, 100, 94, 0, 2 * Math.PI, false);

                ///秒
                ang = second / 60;
                cx = 70 * Math.cos(Math.PI / 2 - 2 * Math.PI * ang);
                cy = 70 * Math.sin(Math.PI / 2 - 2 * Math.PI * ang);
                context.moveTo(100, 100);
                context.lineTo(100 + cx, 100 - cy);
                for (i = 0; i < 11; i++) {

                }
                ///分
                ang = (minute * 60 + second) / 3600;
                cx = 60 * Math.cos(Math.PI / 2 - 2 * Math.PI * ang);
                cy = 60 * Math.sin(Math.PI / 2 - 2 * Math.PI * ang);
                context.moveTo(100, 100);
                context.lineTo(100 + cx, 100 - cy);

                ///时
                ang = ((hour >= 12 ? hour - 12 : hour) * 3600 + minute * 60 + second) / (3600 * 12);
                cx = 40 * Math.cos(Math.PI / 2 - 2 * Math.PI * ang);
                cy = 40 * Math.sin(Math.PI / 2 - 2 * Math.PI * ang);
                context.moveTo(100, 100);
                context.lineTo(100 + cx, 100 - cy);

                context.stroke();

            }
        }

        function clock() {
            test();
            setInterval("clock()", 1000);
        }

        window.onload = function () {
            clock();

        };

    </script>
</head>
<body>
<canvas id="drawing" width="200px" height="200px"></canvas>

</body>
</html>