Canvas实现简易数字电子时钟

已于 2024-04-03 10:47:15 修改
阅读量391 收藏 10
点赞数 5
分类专栏： Canvas 文章标签： 前端 javascript canva可画
于 2024-04-02 16:45:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44910894/article/details/137275829
版权

效果图

在这里插入图片描述

逻辑代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>粒子时钟</title>
    <style>
        body {
            margin: 0;
            overflow: hidden
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        const [width, height] = [window.innerWidth, window.innerHeight];
        const canvas = document.getElementById('canvas');
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext('2d');

        /*声明钟表的基本数据*/
        //钟表数字
        const numDt = [
            //0
            [
                1, 1, 1, 1,
                1, 0, 0, 1,
                1, 0, 0, 1,
                1, 0, 0, 1,
                1, 0, 0, 1,
                1, 0, 0, 1,
                1, 1, 1, 1
            ],
            //1
            [
                0, 0, 0, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                0, 0, 0, 1
            ],
            //2
            [
                1, 1, 1, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                1, 1, 1, 1,
                1, 0, 0, 0,
                1, 0, 0, 0,
                1, 1, 1, 1
            ],
            //3
            [
                1, 1, 1, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                1, 1, 1, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                1, 1, 1, 1
            ],
            //4
            [
                1, 0, 0, 1,
                1, 0, 0, 1,
                1, 0, 0, 1,
                1, 1, 1, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                0, 0, 0, 1
            ],
            //5
            [
                1, 1, 1, 1,
                1, 0, 0, 0,
                1, 0, 0, 0,
                1, 1, 1, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                1, 1, 1, 1
            ],
            //6
            [
                1, 1, 1, 1,
                1, 0, 0, 0,
                1, 0, 0, 0,
                1, 1, 1, 1,
                1, 0, 0, 1,
                1, 0, 0, 1,
                1, 1, 1, 1
            ],
            //7
            [
                1, 1, 1, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                0, 0, 0, 1
            ],
            //8
            [
                1, 1, 1, 1,
                1, 0, 0, 1,
                1, 0, 0, 1,
                1, 1, 1, 1,
                1, 0, 0, 1,
                1, 0, 0, 1,
                1, 1, 1, 1
            ],
            //9
            [
                1, 1, 1, 1,
                1, 0, 0, 1,
                1, 0, 0, 1,
                1, 1, 1, 1,
                0, 0, 0, 1,
                0, 0, 0, 1,
                1, 1, 1, 1
            ],
            //:
            [
                0, 0, 0, 0,
                0, 0, 0, 0,
                0, 0, 1, 0,
                0, 0, 0, 0,
                0, 0, 1, 0,
                0, 0, 0, 0,
                0, 0, 0, 0
            ],
        ];
        //项目数量
        const itemNum = 8;
        //项目间隙的数量
        const itemSpNum = itemNum - 1;
        //项目间隙的宽度
        const itemSpace = 24;
        //粒子尺寸
        const partSize = 24;
        //项目的列数，行数
        const [itemColNum, itemRowNum] = [4, 7];
        //项目宽度
        const itemWidth = partSize * itemColNum;
        //时钟宽度
        const clockWidth = itemWidth * itemNum + itemSpace * itemSpNum;
        //时钟的高度
        const clockHeight = partSize * itemRowNum;
        //时钟的位置，放在屏幕中间
        const clockPos = {
            x: (width - clockWidth) / 2,
            y: (height - clockHeight) / 5
        };

        /*粒子发射器*/
        class Gun {
            constructor(width, height) {
                //尺寸
                this.width = width;
                this.height = height;
                //位置
                this.x = 0;
                this.y = 0;
                //状态 1：粒子发射器的枪膛中有粒子；0：粒子发射器的枪膛中没有粒子。默认没有粒子。
                this.state = 0;
            }
            //绘制辅助线
            draw(ctx) {
                const { x, y, width, height, state } = this;
                ctx.save();
                ctx.strokeStyle = '#aaa';
                ctx.strokeRect(x, y, width, height);
                if (state) {
                    ctx.fillRect(x, y, width, height);
                }
                ctx.restore();
            }
        }
        /*items 项目集合
        * items=[项目,项目,项目,项目,项目,项目,项目,项目]，其中有8个项目
        * 项目=[4*7=28个粒子发射器]
        * 1个粒子发射器中有0个或多个粒子
        * */
        const items = [];
        //建立八个项目
        for (let i = 0; i < itemNum; i++) {
            //建立项目
            const item = [];
            //当前项目x 位置
            let curItemX = (itemWidth + itemSpace) * i + clockPos.x;
            //建立粒子发射器。每个项目都是4列，7行，所以遍历列和行。
            for (let y = 0; y < itemRowNum; y++) {
                //发射器的y 位置
                const eleY = partSize * y + clockPos.y;
                //遍历列
                for (let x = 0; x < itemColNum; x++) {
                    //粒子发射器的x 位置
                    const eleX = partSize * x + curItemX;
                    //实例粒子发射器对象
                    const gun = new Gun(partSize, partSize);
                    //设置粒子发射器的位置
                    gun.x = eleX;
                    gun.y = eleY;

                    //将粒子发射器添加到项目中
                    item.push(gun);
                }
            }
            //将项目添加到项目集合里
            items.push(item);
        }


        /*先示配代表了冒号的两个项目*/
        fitNum(10, 2);
        fitNum(10, 5);

        /*基于时钟文字，修改项目中每个粒子发射器的状态的方法
        * numInd 数字在numDt数据集合中的索引
        * itemInd 项目在项目集合中的索引位置
        * */
        function fitNum(numInd, itemInd) {
            const item = items[itemInd];
            numDt[numInd].forEach((ele, ind) => {
                item[ind].state = ele;
            })
        }

        //渲染方法
        !(function render() {
            //获取时间差和时分秒
            const { hour, minute, second } = updateTime();
            //更新时钟的时间
            updateClock(hour, minute, second);
            //清理画布
            ctx.clearRect(0, 0, width, height);
            //先渲染state 状态不为0 的元素
            items.flat().forEach((ele) => {
                ele.draw(ctx);
            });
            //请求动画帧
            requestAnimationFrame(render)
        })();

        /*更新时钟的时间：基于数组类型的时、分、秒更新时钟*/
        function updateClock(hour, minute, second) {
            //匹配小时
            fitNum(hour[0], 0);
            fitNum(hour[1], 1);
            //匹配分钟
            fitNum(minute[0], 3);
            fitNum(minute[1], 4);
            //匹配秒
            fitNum(second[0], 6);
            fitNum(second[1], 7);
        }
        /*updateTime() 获取时、分、秒的方法
        * 此处的时、分、秒是由两个数字组成的数组，如小时为1点=[0,1]，10点=[1,0]
        * */
        function updateTime() {
            //获取时间差
            const time = new Date();
            //返回时间差和时、分、秒
            return {
                hour: parseTime(time.getHours()),
                minute: parseTime(time.getMinutes()),
                second: parseTime(time.getSeconds())
            };
        }
        //解析时间,如30分钟，解析为[3,0]
        function parseTime(t) {
            let arr;
            if (t < 10) {
                arr = [0, t];
            } else {
                const str = t.toString();
                arr = [parseInt(str[0]), parseInt(str[1])]
            }
            return arr;
        }




    </script>
</body>

</html>

文章参考开课吧课程《webGL工程师之webgl之最短教程》，想详细了解的小伙伴可以去看看

鹏北海-RemHusband
关注
专栏目录
canvas--绚丽的时钟效果
lsy__lsy的博客
05-17 382
参考文档:https://blog.csdn.net/heyan1106yan/article/details/52998285&lt;!DOCTYPE HTML&gt;&lt;html&gt;&lt;head&gt;&lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximu...
canvas常用方法，canvas绘制时钟案例
最新发布
study_way的博客
10-26 384
在路径对象上，使用不同的绘图命令来定义路径的形状。
小任务之Canvas绘制时钟
weixin_30664615的博客
01-04 108
背景图的绘制（大圆、数字、小圆点） 掌握基础知识：圆的绘制（arc方法），关于圆的弧度的计算，数学中关于sin cos的用法 圆的弧度为2*Math.PI 12个数字分得弧度每个为2*Math.PI/12 那么rad=i*2*Math.PI/12 x=Math.cos（rad）*所需要的长度（也就是半径-差值） y=Math.sin（rad）*所需要的长度（也就是半径-差值） 同...
H5的canvas画时钟
10-20
用HTML5的canvas画时钟，怎么使用画布在浏览器上面绘画。画出一个漂亮的时钟。里面用到三角函数以及一些canvas的方法。
canvas数字时钟
04-04
使用HTML5的Canvas标签+JS+CSS制作的简单数字时钟，Firefox较新版本支持，IE及Chrome不完全支持。适合初学者阅读。
canvas实现简易的圆环进度条效果
08-31
本文将探讨如何使用 Canvas 实现一个简易的圆环进度条效果。首先，我们需要理解 Canvas 的基本概念和方法，以及如何利用 JavaScript 控制其绘图过程。 Canvas 提供了一个二维绘图环境，通过 JavaScript API 可以...
canvas实现背景数字雨
08-12
canvas实现背景数字雨，黑客页面背景
用canvas实现简易刮刮乐功能
03-22
使用canvas实现刮刮乐功能，中奖概率10%，鼠标点击，擦除蒙版，当擦除面积达到画布面积的70%，显示全貌
通过canvas实现简易画板
11-26
刚开始学HTML5中的canvas，实现的一个简易的画板。（只注重了功能的实现，没有对样式添加太多）
javascript canvas实现简易时钟例子
01-19
本文实例为大家分享了javascript canvas实现简易时钟的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <meta name=viewport content=...
Canvas案例-炫酷的数字时钟
weixin_34417200的博客
06-12 538
引言本人第一次发帖，有什么不妥之处还望大家包涵（有什么想法或者意见都可以在评论区留言），好了废话不多说，看下我要介绍的东西。案例介绍炫酷的数字时钟，使用canvas绘制，这个案例来源于B站一个视频，但是实现思路完全是自己摸索的，效果如下图知识点案例涉及的东西不是特别多，我大致罗列下：canvas的基本使用，绘制圆动画中的requestAnimationFrame与定时器按位运算与数组构建模型如何模...
canvas 画简易时钟 （钟表时钟+数字时钟同步显示）
MarkJunHao的博客
08-04 2774
这次跟大家分享的是一个用canvas写的简易时钟，话不多说，直接上效果图： 下面是具体的代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&
HTML5的canvas数字时钟可放大缩小
qq_57191123的博客
09-14 181
首先我们需要先创建一个三维数组的javascript文件 digit = [ [ [0,0,1,1,1,0,0], [0,1,1,0,1,1,0], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1], [1,1,0,0,0,1,1]
用canvas完成超炫酷的数字时钟
Moriarty的专栏
02-06 3104
这次要完成的是一个很炫酷很炫酷的时钟， 如图   每一次时钟更新都伴随有很多彩色小球落下，很不是很赞啊！O(∩_∩)O~ 这个东西呢，主要用到了两个方面的东西：canvas和js中的Date对象， 涉及到的canvas属性和方法有： Canvas的声明         当前浏览器不支持Canvas，请更换浏览器后再试 设置canvas画布的宽高：   canvas.w
使用CANVAS绘制LED点阵时钟
亚里士朱德的专栏
02-22 3460
核心内容： 1.数字的LED点阵实现方式 点阵的实现方式其实用到了一个二维数组，这里用到了7X10和4X10的二维数组，当数组值为1时绘制红点，当数组为0时绘制灰点，按照这个方法也可以绘制英文字母特殊符号等。 //数字"9" [0,1,1,1,1,1,0], [1,1,0,0,0,1,1], [1,1,
使用canvas实现数字时钟效果
weixin_30391339的博客
06-26 338
<canvas id="canvas"></canvas> <script> (function(){ var digit= [ [ [0,0,1,1,1,0,0], [0,...
玩转html5（四）----使用canvas画一个时钟（可以动的哦！）
04-29 8842
先给个效果图，我画的比较丑，大家可以自己美化一下， 直接上代码： 您的浏览器不支持canvas //获取画布 var clock=document.getElementById('clock'); //设置绘图环境
HTML5 Canvas粒子数字时钟动画
hzp666的博客
08-03 1380
HTML5 Canvas粒子数字时钟动画 860 人浏览 发表回复 还记得我们之前分享的几款HTML5粒子动画特效吗？比如这款HTML5文本输入框粒子动画特效和HTML5 Canvas生成粒子效果的人物头像，效果都非常炫酷。今天我们要给大家介绍的也是一款基于HTML5 Canvas的粒子数字时钟动画，时钟会读取本地时间，并且每变化一次均会出现粒子动画效果，
Canvas 实现一个时钟
小鹏要逆袭的博客
08-02 1183
使用canvas实现另一个小时钟，效果图如下： 前端html代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-widt
HTML5 Canvas实现简易桌球游戏教程
- 瞄准线在桌球游戏中用于帮助玩家确定击球方向，虽然在示例中没有具体代码展示，但它通常是一个简单的线条或者图形，可以通过Canvas的`strokeRect`或`moveTo`/`lineTo`方法绘制。 为了实现简单的碰撞检测，这里...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鹏北海-RemHusband

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值