Canvas实现会动的表钟

最新推荐文章于 2024-07-22 17:27:18 发布

cxixi0222

最新推荐文章于 2024-07-22 17:27:18 发布

阅读量134

点赞数

分类专栏： html5 canvas 文章标签： canvas html5

本文链接：https://blog.csdn.net/cxixi0222/article/details/104836262

版权

html5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

canvas

2 篇文章 0 订阅

订阅专栏

<body>
    <canvas id="canvas" width="400" height="400" style="border:1px dashed gray;"></canvas>
</body>
<script type="text/javascript">
    window.onload = function () {
        var canvas = document.querySelector("#canvas");
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            setInterval(function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                move();
            }, 1000);

            move();
            function move() {
                ctx.save();
                ctx.lineWidth = 8;
                ctx.strokeStyle = "black";
                ctx.lineCap = "round";
                ctx.translate(200, 200);
                ctx.rotate(-90 * Math.PI / 180);
                ctx.beginPath();

                //外层空心圆盘
                ctx.save();
                ctx.strokeStyle = "pink";
                ctx.lineWidth = 14;
                ctx.beginPath();
                ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180);
                ctx.stroke();
                ctx.restore();


                //时针刻度
                ctx.strokeStyle = "#5B5B5B";
                ctx.save();
                for (var i = 0; i < 12; i++) {
                    ctx.rotate(30 * Math.PI / 180);
                    ctx.beginPath();
                    ctx.moveTo(100, 0)
                    ctx.lineTo(120, 0);
                    ctx.stroke();
                }
                ctx.restore();

                //分针刻度
                ctx.save();
                ctx.lineWidth = 4;
                for (var i = 0; i < 60; i++) {
                    ctx.rotate(6 * Math.PI / 180);
                    if ((i + 1) % 5 != 0) {
                        ctx.beginPath();
                        ctx.moveTo(117, 0)
                        ctx.lineTo(120, 0);
                        ctx.stroke();
                    }
                }
                ctx.restore();

                //时针 分针 秒针 表座
                var date = new Date();
                var s = date.getSeconds();
                var m = date.getMinutes() + s / 60;
                var h = date.getHours() + m / 60;
                h = h > 12 ? h - 12 : h;

                //时针
                ctx.save()
                ctx.lineWidth = 14;
                ctx.rotate(h * 30 * Math.PI / 180)
                ctx.beginPath()
                ctx.moveTo(-20, 0);
                ctx.lineTo(80, 0);
                ctx.stroke();
                ctx.restore()

                //分针
                ctx.save()
                ctx.lineWidth = 10;
                ctx.rotate(m * 6 * Math.PI / 180)
                ctx.beginPath()
                ctx.moveTo(-28, 0);
                ctx.lineTo(112, 0);
                ctx.stroke();
                ctx.restore()


                //秒针
                ctx.save()
                ctx.lineWidth = 6;
                ctx.strokeStyle = "#D40000";
                ctx.fillStyle = "#D40000";
                ctx.rotate(s * 6 * Math.PI / 180)
                ctx.beginPath();
                ctx.moveTo(-30, 0);
                ctx.lineTo(83, 0);
                ctx.stroke();
                //表座
                ctx.beginPath();
                ctx.arc(0, 0, 10, 0, 360 * Math.PI / 180);
                ctx.fill();
                //秒头
                ctx.beginPath();
                ctx.arc(96, 0, 10, 0, 360 * Math.PI / 180);
                ctx.stroke();
                ctx.restore()
                ctx.restore();
            }
        }
    }

</script>

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

cxixi0222

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas实现会动的表钟

<body> <canvas id="canvas" width="400" height="400" style="border:1px dashed gray;"></canvas></body><script type="text/javascript"> window.onload = function () ...
复制链接

扫一扫

专栏目录