电子雨代码-html

电子雨代码

动画效果展示在这里插入图片描述

代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Code</title><style>body {margin: 0;overflow: hidden;}</style></head><body><canvas id="myCanvas"></canvas><script>const width = document.getElementById("myCanvas").width = screen.availWidth;const height = document.getElementById("myCanvas").height = screen.availHeight;const ctx = document.getElementById("myCanvas").getContext("2d");const arr = Array(Math.ceil(width / 10)).fill(0);const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");function rain() {ctx.fillStyle = "rgba(0,0,0,0.05)";ctx.fillRect(0, 0, width, height);ctx.fillStyle = "#0f0";arr.forEach(function (value, index) {ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;});}setInterval(rain, 30);</script></body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/340261.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vs报错TypeError: Cannot read property ‘parseComponent‘ of undefined(已解决)

目录 错误分析&#xff1a; 解决方案&#xff1a; 1.卸载 vue-template-compiler&#xff1a; 2.查看项目中已经安装的 Vue 的版本。 3.安装特定版本的 vue-template-compiler&#xff1a; 4.现在重新运行一下&#xff0c;成功&#xff01; 错误分析&#xff1a; 这是因…

Maven在java中的实现(对java的项目进行打包)

前言: 在前面的文章中我们了解了Maven的作用,并在自己的电脑上安装配置好了Maven,也成功的在IDEA中添加了Maven,但是具体的实现还是有一些些小问题,那么接下来,我将带着大家对Java项目进行一次打包,系统的完成一次,并在途中解决一下会出现的问题. 我以图片中选中的这个包为例,…

美国证券交易委员会 X 账户被黑,引发比特币市场震荡

Bleeping Computer 网站消息&#xff0c;威胁攻击者成功“占领”了美国证券交易委员会的 X 账户&#xff0c;并发布一条关于批准比特币 ETF 在证券交易所上市的虚假公告。 帖子原文&#xff1a;今天&#xff0c;美国证券交易委员会批准比特币 ETF 在注册的国家证券交易所上市&a…

二维激光雷达

目录 前言 1 单线激光雷达 激光器 接收器 信号处理单元 旋转机构 2 单线激光雷达原理 2.1 三角测距法 1、直射式 2、斜射式 2.2 TOF飞行时间测距法 总结 前言 开始干活啦&#xff0c;单线激光雷达&#xff0c;三维知道原理&#xff0c;但不研究了&#xff0c;问就是买不起。 1 …

【C++】手撕 list类(包含迭代器)

目录 1&#xff0c;list的介绍及使用 2&#xff0c;list_node 3&#xff0c;list_node() 3&#xff0c;list 4&#xff0c;list() 5&#xff0c;push_back(const T& x) 6&#xff0c;print() 7&#xff0c;_list_iterator 8&#xff0c;operator*() 9&#xff0c…

用握力器玩谷歌小恐龙游戏(二)

往期回顾 用握力器玩谷歌小恐龙游戏&#xff08;一&#xff09; GS-GAME-PC 前言 专门买了一个电钻&#xff0c;在握力器上钻出了两个孔&#xff0c;用来放两个引脚的按键&#xff0c;这样比之前用热熔胶的方式更干净&#xff0c;更稳定 加了一个18650的电池&#xff0c;之前…

FreeRTOS 入门知识

1. 裸机与 RTOS 介绍 像 STM32 的一些基础例程&#xff0c;跑马灯、蜂鸣器、LCD 等&#xff0c;这些都是运行的裸机&#xff0c;那就是不带任何操作系统的。 还有就是我们的 RTOS&#xff0c;那 RTOS 它究竟是什么&#xff1f;它其实就是一个 Real-time OS&#xff0c;也就是…

使用YOLOv5训练自己的数据集 --- 老鼠识别

方式一&#xff1a;YOLOv5开源地址&#xff1a;https://github.com/ultralytics/yolov5/blob/master/README.zh-CN.md 方式二&#xff1a;YOLOv5源码&#xff1a;https://pan.baidu.com/s/12khk-Wkc5_J5ho4oZ7_FhA?pwdxtru 安装环境依赖包&#xff1a; 项目目录地址栏中输入…

天津港强集团携手黄向墨创立的玉湖冷链 头部企业加强交流合作

玉湖集团是总部设于香港的有二十多年历史的跨国实业投资集团&#xff0c;由祖籍广东的香港企业家、著名爱国侨领黄向墨先生创立。黄向墨先生现任中国和平统一促进会常务理事、中华海外联谊会常务理事、香港选委会委员及香港全国人大代表选举会议成员。 新年第一天&#xff0c;…

【算法】七夕祭

题目 七夕节因牛郎织女的传说而被扣上了「情人节」的帽子。 于是 TYVJ 今年举办了一次线下七夕祭。 Vani 同学今年成功邀请到了 cl 同学陪他来共度七夕&#xff0c;于是他们决定去 TYVJ 七夕祭游玩。 TYVJ 七夕祭和 11 区的夏祭的形式很像。 矩形的祭典会场由 N 排 M 列共…

使用SpringCache操作Redis缓存数据

SpringCache概念 SpringCache是一个框架&#xff0c;实现了基于注解的缓存功能&#xff0c;只需要简单的加一个注解&#xff0c;就能实现缓存功能。 SpringCache提供了一层抽象&#xff0c;底层可以切换不同的缓存实现&#xff0c;例如&#xff1a; EHCacheCaffeineRedis 使…

【附源码】基于SSM框架的房屋租赁系统的设计与实现

基于SSM框架的房屋租赁系统的设计与实现 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&…