Canvas实现简易数字电子时钟（带自定义样式）

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

前置内容

Canvas实现简易数字电子时钟
Canvas实现数字电子时钟（带粒子掉落效果）

效果

在这里插入图片描述

逻辑代码

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

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

        #canvas {
            background-image: url("./images/back.jpg");
            background-size: cover;
            background-position: center;
        }
    </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');

        /*1.建立四张图片作为图像*/
        const imgH = new Image();
        imgH.src = './images/h.png';
        const imgM = new Image();
        imgM.src = './images/m.png';
        const imgS = new Image();
        imgS.src = './images/s.png';
        const imgO = new Image();
        imgO.src = './images/o.png';

        /*2.声明钟表的基本数据*/
        //钟表数字
        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
        };
        //所有粒子的边界
        const edge = { left: 0, right: width, bottom: height - 50 };


        /*粒子对象*/
        class Particle {
            constructor(width, height, img) {
                //尺寸
                this.width = width;
                this.height = height;
                //图像
                this.img = img;
                //位置
                this.x = 0;
                this.y = 0;
                //1：新生，0：坠落，2：成型
                this.state = 1;
                //父级
                this.parent = null;

                //缩放
                this.scale = 0;
                //速度
                this.vx = this.getVx();
                this.vy = 0.002;
                //重力
                this.gravity = 0.03;
                //弹力
                this.bounce = -0.85;
            }
            //获取x 轴的速度，避免直上直下的弹动
            //vx 取值范围是[-0.5,0.5]，但不能在[-0.15,0.15] 之间
            getVx() {
                let vx = Math.random() - 0.5;
                if (Math.abs(vx) < 0.15) {
                    return this.getVx();
                } else {
                    return vx;
                }
            }
            //更新数据
            update(diff) {
                //解构状态、尺寸和位置
                const { state, width, height, parent } = this;
                //解构边界
                const { left, right, bottom } = edge;
                if (state === 1) {
                    //如果粒子的状态为新生状态
                    //开始生长
                    this.scale += 0.01 * diff;
                    //长到1 就算成型，不要长了
                    if (this.scale > 1) {
                        this.scale = 1;
                        this.state = 2;
                    }
                } else if (state === 0) {
                    //如果粒子的状态为坠落状态
                    this.vy += this.gravity;
                    //设置粒子位置
                    this.y += this.vy * diff;
                    this.x += this.vx * diff;
                    //底部碰撞检测
                    if (this.y + height > bottom) {
                        //将粒子位置调整到底部边界之上
                        this.y = bottom - height;
                        //y 值反弹
                        this.vy *= this.bounce;
                    }
                    //左右碰撞检测
                    if (this.x + width < left || this.x > right) {
                        //将此元素从父对象的数组中删除
                        parent.remove(this);
                    }
                }
            }
            //绘图方法
            draw(ctx) {
                //解构位置、尺寸、缩放
                const { x, y, img, scale } = this;
                ctx.save();
                //变换坐标系位置
                ctx.translate(x, y);
                //缩放坐标系
                ctx.scale(scale, scale);
                //绘图
                ctx.drawImage(img, 0, 0);
                ctx.restore();
            }
        }
        /*粒子粒子发射器*/
        class Gun {
            constructor(width, height, img) {
                //尺寸
                this.width = width;
                this.height = height;
                //图像
                this.img = img;
                //位置
                this.x = 0;
                this.y = 0;
                //状态 1：粒子发射器的枪膛中有粒子；0：粒子发射器的枪膛中没有粒子。默认没有粒子。
                this._state = 0;
                //粒子库
                this.children = [];
            }
            get state() {
                return this._state;
            }
            set state(val) {
                //在为state 赋值时，做简单的diff 判断
                if (this._state !== val) {
                    if (val) {
                        //制造一个粒子
                        this.createParticle();
                    } else {
                        //粒子仓库中的第一个粒子发射
                        this.children[0].state = 0;
                    }
                    this._state = val;
                }
            }
            /*新建粒子*/
            createParticle() {
                const { x, y, width, height, img, children } = this;
                //实例化粒子对象
                const part = new Particle(width, height, img);
                //粒子位置
                part.x = x;
                part.y = y;
                //粒子父级
                part.parent = this;
                //粒子状态 1：粒子发射器中要有粒子
                part.state = 1;
                //将粒子以前置的方式添加到粒子仓库里
                children.unshift(part);
            }
            /*删除粒子
            * ele 粒子对象
            * */
            remove(ele) {
                const { children } = this;
                const index = children.indexOf(ele);
                if (index !== -1) {
                    children.splice(index, 1);
                }
            }
            /*更新
            * diff：以毫秒为单位的时间差
            */
            update(diff) {
                //遍历粒子仓库中的所有粒子
                this.children.forEach((ele) => {
                    //更新粒子
                    ele.update(diff);
                })
            }
            //绘制辅助线
            drawStroke(ctx) {
                const { x, y, width, height } = this;
                ctx.save();
                ctx.strokeStyle = '#aaa';
                ctx.strokeRect(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;
            //当前项目对应的图片
            let curImg;
            switch (i) {
                //小时图
                case 0:
                case 1:
                    curImg = imgH;
                    break;
                //冒号图
                case 2:
                case 5:
                    curImg = imgO;
                    break;
                //分钟图
                case 3:
                case 4:
                    curImg = imgM;
                    break;
                //秒图
                case 6:
                case 7:
                    curImg = imgS;
                    break;
            }
            //每个项目都是7列，4行。所以遍历列和行，建立粒子发射器。
            for (let r = 0; r < itemRowNum; r++) {
                //发射器的y 位置
                const partY = partSize * r + clockPos.y;
                //遍历列
                for (let c = 0; c < itemColNum; c++) {
                    //粒子发射器的x 位置
                    const partX = partSize * c + curItemX;
                    //实例粒子发射器对象
                    const gun = new Gun(partSize, partSize);
                    //设置粒子发射器的位置
                    gun.x = partX;
                    gun.y = partY;
                    //设置图像
                    gun.img = curImg;
                    //粒子发射器绘制辅助线
                    //part.drawStroke(ctx);
                    //将粒子发射器添加到项目中
                    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;
            })
        }

        /*计时器*/
        let time = new Date();

        /*updateTime() 获取时间差和时、分、秒的方法
        * 此处的时、分、秒是由两个数字组成的数组，如1点=[0,1]，10点=[1,0]
        * */
        function updateTime() {
            //获取时间差
            const now = new Date();
            const diff = now - time;
            time = now;
            //返回时间差和时、分、秒
            return {
                diff,
                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;
        }

        /*更新时钟的时间：基于数组类型的时、分、秒更新时钟*/
        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);
        }

        //渲染
        !(function render() {
            //获取时间差和时分秒
            const { diff, hour, minute, second } = updateTime();
            //更新时钟的时间
            updateClock(hour, minute, second);
            //清理画布
            ctx.clearRect(0, 0, width, height);
            //坠落中的粒子，要最后渲染，避免其被新生的和成型的粒子遮挡
            const dropParts = [];
            //先渲染state 状态不为0 的元素
            items.flat().forEach((part) => {
                part.update(diff);
                part.children.forEach((ele) => {
                    if (ele.state) {
                        ele.draw(ctx);
                    } else {
                        dropParts.push(ele);
                    }
                })
            });
            //后渲染状态为0 的元素
            dropParts.forEach((ele) => {
                ele.draw(ctx);
            });
            //请求动画帧
            requestAnimationFrame(render);
        })()
    </script>
</body>

</html>

用到的图片

h.png：
在这里插入图片描述
m.png：
在这里插入图片描述
s.png：
在这里插入图片描述
o.png：
在这里插入图片描述
back.jpg：
在这里插入图片描述
文章参考开课吧课程《webGL工程师之webgl之最短教程》，想详细了解的小伙伴可以去看看

鹏北海-RemHusband
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端实现炫酷动效_超级绚丽，20款前端动画特效，轰炸你的眼睛
weixin_39717110的博客
12-19 4510
前言HTML5一个相当出色的web技术，它不仅可以让你更加方便地操纵页面元素，而且可以通过canvas实现更多的动画特效，引进HTML5标准后，CSS3也就可以发挥更大的作用。本文主要介绍了一些基于HTML5 Canvas的动画特效，分享给大家，希望大家喜欢。1、HTML5 Canvas画板画图工具 可定义笔刷和画布HTML5 Canvas还有一个比较实用的应用，那就是网络画板，这样我们就可以在网...
javascript结合Canvas 实现简易的圆形时钟
10-24
本文给大家分享的是javascript结合Canvas 实现简易的圆形时钟，主要是对自己前段时间学习html5的canvas的一次小检验，这里推荐给小伙伴们，有需要的可以参考下。
HTML5 Canvas实现圆形时钟简易教程
jakioneplus的博客
09-17 1591
十分感谢segmentfault thewindsword的指引。文章传送门：点击打开链接 阅读本文需要一点关于canvas基本用法的基础，读者如需了解，可以通过w3c或其他网站先行简单学习它的教程。
Android UI 自定义控件大全
晨曦
07-11 3379
很多东西的实用性还是蛮高的，转载让更多人看到。 原文链接： https://github.com/opendigg/awesome-github-android-ui 内容 抽屉菜单 ListView WebView SwitchButton 按钮 点赞按钮 进度条 TabLayout 图标 下拉刷新 ViewPager 图表(Chart) 菜单(M...
15个超强悍的CSS3圆盘时钟动画赏析
测试
01-08 619
在网页上，特别是个人博客中经常会用到时钟插件，一款个性化的时钟插件不仅可以让页面显得美观，而且可以让访客看到当前的日期和时间。今天我们给大家收集了15个超强悍的圆盘时钟动画，很多都是基于CSS3，也有一部分利用jQuery和SVG，让我们一起来看看吧。 1、纯CSS3/SVG实现的带秒针表盘圆盘复古时钟 现在的网页上圆盘时钟越来越少见了，更多的是数字时钟和数字日历。之前我们分享过一些基于j...
canvas
weixin_30905133的博客
10-29 47
`<canvas>`是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。 `<canvas`是一个矩形区域，您可以控制其每一像素。 ## 引入Canvas ```html <canvas id="canvas" width="300" height="300"></canvas> ``` `<canvas...
Canvas
weixin_30600197的博客
10-29 40
# Canvas ## 什么是Canvas `<canvas>`是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。 `<canvas`是一个矩形区域，您可以控制其每一像素。 ## 引入Canvas```html<canvas id="canvas" width="300" height="300"></canvas>``` `...
Canvas&正则表达式
weixin_30559481的博客
10-30 58
正则表达式 var str='test' var reg=/^test$/ var result=reg.test (str) // 需要检测的目标 console.log(result) //ture ...
Android高级UI进阶之路(五) —— Canvas详解
金戈鐡馬
03-08 773
上一篇文章介绍了 Paint 的 API 和Paint 高级使用，下面再来讲讲有关 Canvas 绘图的知识，Canvas 可以实现很多绘图方式, 该篇就全面介绍 Canvas 的使用。更多Android系列教程上传在GitHub：今天逛掘金发现了一种讲解自定义好的方式，可以去看原文Android关于Canvas你所知道的和不知道的一切。
自定义控件 - 收藏集 - 掘金
weixin_33755649的博客
06-26 898
自定义 view--Menu 菜单 - Android - 掘金一、前言 第一次写博客，不知道什么姿势才能显示出一副好像很老练的样子。老大让写一个菜单栏控件，借鉴了Idtk自定义view，站在巨人的肩上... 自定义对话框 - Android - 掘金可以自定义风格，还可以用它实现下载可以自定义进入退出动画等 新版本的对话框封... 仿新...
javascript canvas实现简易时钟例子
10-14
主要为大家详细介绍了javascript canvas实现简易时钟例子，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android Canvas自定义实现时钟效果
01-04
Android之Canvas自定义画一个时钟，供大家参考，具体内容如下 自定义控件，在安卓是也是一种无所不能的技术了，所有自带控件，以及组合自带控件不能实现的一些效果，我们都可以通过自定义控件来实现，不过，如果能有...
javascript结合Canvas 实现简易的圆形时钟.docx
01-18
javascript结合Canvas 实现简易的圆形时钟.docx
vue源码之mustache模板引擎1
最新发布
qweasl_的博客
05-21 170
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 686
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1139
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
综合性练习-验证码
cj13106811623的博客
05-15 834
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
【VueRouter 的基本使用】
2302_76611599的博客
05-17 176
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
canvas自定义样式
05-13
同时，canvas元素的绘制内容可以通过JavaScript来控制，因此可以通过编写JavaScript代码来实现自定义的样式效果。 以下是一些常用的自定义样式技巧： 1. 设置canvas元素的宽高属性。可以通过CSS样式表或JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

鹏北海-RemHusband

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

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

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

打赏作者

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

抵扣说明：

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

余额充值