带你使用canvas实现时钟

其他 2020-04-27 02:12:52 阅读次数: 0

带你使用canvas实现时钟

在这里插入图片描述

实现表盘

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            height: 100%;
            overflow: hidden;
            background: pink;
        }
        
        #clock {
            background: blanchedalmond;
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 50%;
            transform: translate3d(-50%, -50%, 0);
        }
    </style>
</head>

<body>
    <canvas id="clock" width="400" height="400"></canvas>
</body>
<script type="text/javascript">
    /** @type {HTMLCanvasElement} */
    window.onload = function() {
        var clock = document.querySelector("#clock");
        if (clock.getContext) {
            var ctx = clock.getContext("2d");
            setInterval(() => {
                ctx.clearRect(0, 0, clock.width, clock.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 = "#325FA2";
                ctx.lineWidth = 14;
                ctx.beginPath();
                ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180);
                ctx.stroke();
                ctx.restore();

                //时针列表
                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>

</html>

实现 分针 、秒针、时针

在这里插入图片描述


   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();

}


}

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            height: 100%;
            overflow: hidden;
            background: pink;
        }
        
        #clock {
            background: blanchedalmond;
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 50%;
            transform: translate3d(-50%, -50%, 0);
        }
    </style>
</head>

<body>
    <canvas id="clock" width="400" height="400"></canvas>
</body>
<script type="text/javascript">
    /** @type {HTMLCanvasElement} */
    window.onload = function() {
        var clock = document.querySelector("#clock");
        if (clock.getContext) {
            var ctx = clock.getContext("2d");
            setInterval(() => {
                ctx.clearRect(0, 0, clock.width, clock.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 = "#325FA2";
                ctx.lineWidth = 14;
                ctx.beginPath();
                ctx.arc(0, 0, 140, 0, 360 * Math.PI / 180);
                ctx.stroke();
                ctx.restore();

                //时针列表
                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>

</html>
妙趣前端
发布了77 篇原创文章 · 获赞 218 · 访问量 1万+
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_45768871/article/details/105694890
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022