当前位置： 首页 > news >正文

canvas实现代码雨

news 2026/2/10 17:52:31

 学习抖音： @渡一前端必修课

 效果图：

 全部代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Title</title><style>* {padding: 0;margin: 0;}#view {max-width: 100vw;max-height: 100vh;overflow: hidden;display: block;}</style>
</head><body><canvas id="view"></canvas>
</body>
<script>// 获取canvas元素const cvs = document.getElementById("view");// 获取窗口大小  window.devicePixelRatio// window.devicePixelRatio为一个双精度浮点值，指示显示器的物理像素分辨率与CSS像素分辨率之比。简单来说，它告诉浏览器应使用多少屏幕物理像素来绘制单个CSS像素。const width = window.innerWidth * window.devicePixelRatio,height = window.innerHeight * window.devicePixelRatioconsole.log(width)console.log(height)// 设置 canvas尺寸cvs.width = widthcvs.height = height// 获取绘制上下文const ctx = cvs.getContext("2d")// 字体大小const fontSize = 20 * window.devicePixelRatio;// 定义列宽和多少列const columnWidth = 20;const columnCount = Math.floor(width / 20);// 没一列下一个文字是第几个const nextChar = new Array(columnCount).fill(0)// 绘制function draw() {ctx.fillStyle = "rgba(255,255,255,0.2)";ctx.fillRect(0, 0, width, height)for (let i = 0; i < columnCount; i++) {ctx.fillStyle = getRandomColor();let char = getRandomChar();ctx.font = `${fontSize}px "Roboto Mono"`let x = i * columnWidth; // x 轴的位置const s = nextChar[i]let y = (s + 1) * fontSize; //y 轴的位置ctx.fillText(char, x, y)if (y > height && Math.random() > 0.95) {nextChar[i] = 0} else {nextChar[i]++}}}setInterval(draw, 30)// 获取随机颜色function getRandomColor() {let color = ["#4150d8","#28bf7e","#ed7c2f","#ff0000","#f9cf36","#4a5bdc","#7b04f4","#ee04f4","#04a0f4","#1af404","#d4f404","#f404f1",];return color[Math.floor(Math.random() * color.length)]}// 获取随机文字function getRandomChar() {const str = "qwertyuioplkjhgfdabzxcmv"return str[Math.floor(Math.random() * str.length)]}
</script></html>

相关文章：

canvas实现代码雨

学习抖音&#xff1a; 渡一前端必修课 效果图&#xff1a; 全部代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge">&…...

编程日记 2023/8/9 20:04:09

基于MFCC特征提取和HMM模型的语音合成算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022A 3.部分核心程序 ............................................................................ %hmm是已经…...

编程日记 2023/8/9 20:03:08

多重网格算法的cuda编程

这里写自定义目录标题 多重网格算法介绍问题描述——五点差分法求解二维泊松方程五点差分法Gauss迭代算法限制算子介绍提升算子二重网格算法多重网格算法多重网格cuda代码编写串行代码mg.c两重网格cuda并行代码jacobi迭代的cuda编程device_jacobiMakefilecuda_mg.cucuda_mg.hma…...

编程日记 2023/8/9 20:02:03

DP（状态机模型）

大盗阿福 阿福是一名经验丰富的大盗。趁着月黑风高&#xff0c;阿福打算今晚洗劫一条街上的店铺。 这条街上一共有 N 家店铺&#xff0c;每家店中都有一些现金。 阿福事先调查得知&#xff0c;只有当他同时洗劫了两家相邻的店铺时&#xff0c;街上的报警系统才会启动&#x…...

编程日记 2023/8/9 20:01:01

按照指定的文件顺序进行scp传输

前言 scp 默认传输顺序是按照文件名进行排序的&#xff0c; 但我当前工作中遇到要验证两台机器的神经网络层的精度&#xff0c;需要把网络层的输入输出&#xff08;假设有100层&#xff0c; 一共64G) 从机器1传输到机器2 &#xff0c; 然后进行对比&#xff1b;这种情况下最好…...

编程日记 2023/8/9 20:00:00

小红书数据分析丨现实版模拟人生，这届网友热衷于“云开店”？

近期&#xff0c;小红书出现的一个神秘的热心群体&#xff0c;他们经常活跃在各种小店店主发布的求助帖评论区中&#xff0c;积极地帮助店主出谋划策&#xff0c;寻找小店经营的优化之道&#xff0c;成功帮助小店成功转亏为盈&#xff01;江湖人称一一云股东。小红书话题#爱上帮…...

编程日记 2023/8/9 19:58:59

休闲卤味强势崛起：卤味零食成为新一代热门美食

随着人们生活水平的提高和消费观念的转变&#xff0c;休闲卤味逐渐成为了人们日常生活中的热门美食。据最新数据显示&#xff0c;2022年&#xff0c;我国卤味市场销售额达到了约2000亿元&#xff0c;预计到2025年将突破3000亿元大关。其中&#xff0c;休闲卤味以每年10%的速度持…...

编程日记 2023/8/9 19:57:57

自除数-C语言

描述 给定两个整数 left 和 right &#xff0c;返回一个列表&#xff0c;列表的元素是范围 [left, right] 内所有的 自除数。 1 < left < right < 104 自除数 是指可以被它包含的每一位数整除的数&#xff0c;自除数 不允许包含 0 。例如&#xff0c;128 是一个 自除…...

编程日记 2023/8/9 19:56:56

-bash: ./startup.sh: Permission denied解决

今天在Linux上启动Tomcat&#xff0c;结果弹出&#xff1a;-bash: ./startup.sh: Permission denied 的提示。 这是因为用户没有权限&#xff0c;而导致无法执行。用命令chmod 修改一下bin目录下的.sh权限就可以了。 在Tomcat的bin目录下 &#xff0c;输入命令行 &#xff1a;c…...

编程日记 2023/8/9 19:55:55

Java课题笔记~ AOP 概述

AOP 简介 AOP&#xff08;Aspect Orient Programming&#xff09;面向切面编程。 面向切面编程是从动态角度考虑程序运行过程。 AOP的底层&#xff0c;就是采用动态代理的方式实现的。 采用了两种代理&#xff1a;JDK动态代理、CGLIB动态代理。 JDK动态代理&#xff1a;使…...

编程日记 2023/8/9 19:54:54

真我V3 5G（RMX2200 RMX2201）解锁刷机全过程

安卓系统新Rom包为GSI&#xff0c;更具有通用性&#xff0c;可以比较放心刷。 原厂系统垃圾多、广告多&#xff0c;甚至热点功能不支持ipv6&#xff0c;严重偏离热点机的定位。 主要参考 https://www.bilibili.com/read/cv20730877/https://www.bilibili.com/read/cv2073087…...

编程日记 2023/8/9 19:53:53

springCache-缓存

SpringCache 简介&#xff1a;是一个框架&#xff0c;实现了基于注解的缓存功能&#xff0c;底层可以切换不同的cache的实现&#xff0c;具体是通过CacheManager接口实现 使用springcache,根据实现的缓存技术&#xff0c;如使用的redis,需要导入redis的依赖包 基于map缓存 …...

编程日记 2023/8/9 19:52:48

【solon生态】- solon.cloud.micrometer插件使用指南及micrometer详解

solon.cloud.micrometer插件使用指南 solon是什么solon的cloud生态图快速入门 micrometer指南micrometer是什么监控系统 Supported Monitoring Systems注册表 Registry度量 Meters度量名 Naming Meters度量标签 Tag Naming通用标签 Common Tags 指标过滤器 MeterFilter聚合速率…...

编程日记 2023/8/9 19:51:47

【Spring Boot】Thymeleaf模板引擎 — Thymeleaf的高级用法

Thymeleaf的高级用法 主要介绍Thymeleaf的内联、内置对象、内置变量等高级用法。 1.内联 虽然通过Thymeleaf中的标签属性已经几乎满足了开发中的所有需求&#xff0c;但是有些情况下需要在CSS或JS中访问后台返回的数据。所以Thymeleaf提供了th:inline"text/javascript/…...

编程日记 2023/8/9 19:50:46

用html+javascript打造公文一键排版系统13：增加半角字符和全角字符的相互转换功能

一、实践发现了bug和不足 今天用了公文一键排版系统对几个PDF文件格式的材料进行文字识别后再重新排版&#xff0c;处理效果还是相当不错的&#xff0c;节约了不少的时间。 但是也发现了三个需要改进的地方&#xff1a; &#xff08;一&#xff09;发现了两个bug&#xff1a;…...

编程日记 2023/8/9 19:49:45

元宇宙3D数字虚拟客服打造年轻化、数字化营销新品牌

融合了元宇宙、AI和云计算等技术的虚拟数字人&#xff0c;成为元宇宙数字内容交互的载体&#xff0c;将现实世界中的人与虚拟数字世界的场景、模型及产品链接起来&#xff0c;特别是为电力企业打造的电力元宇宙平台&#xff0c;带来营销宣传多重好处的同时&#xff0c;树立了数…...

编程日记 2023/8/9 19:48:43

micromamba快速安装（windows版本）

快速安装 Micromamba Micromamba 是一个静态链接的 C++ 可执行文件，在 Windows 上就是一个 micromamba.exe 文件，下载下来就直接可以用，甚至都不需要专门安装。唯一需要做的就是设置 Shell 的 Profile 文件，使 micromamba 成为可以在命令行里调用的一个命令。 Micromamba…...

编程日记 2023/8/9 19:47:42

HTML ＜source＞ 标签

实例 拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）： <audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">Your browser does n…...

编程日记 2023/8/9 19:46:41

香港第一金：加息预期仍令贵金属承压，黄金仍需关注破位情况

香港第一金基本面分析&#xff1a; 中国纸黄金交易通显示&#xff0c;全球最大黄金上市交易基金(ETF)截至06月27日持仓量为925.66吨&#xff0c;较上日减持1.44吨&#xff0c;本月止净减持13.90吨。 周二美国公布的上月新屋销售飙升12.2%&#xff0c;经季节调整后折合成年率为…...

编程日记 2023/8/9 19:45:37

C语言学习笔记 vscode使用外部console-11

前言 在默认情况下&#xff0c;我们运行C语言程序都是在vscode终端的&#xff0c;在小程序运行时这个是没有问题的&#xff0c;但是当程序变得复杂它就不好用了&#xff0c;这时我们可以将这个终端设置为外部console&#xff0c;这样方便处理更多、更复杂的程序。 步骤 1.点击…...

编程日记 2023/8/9 19:44:36

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/2/7 17:29:24

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2026/1/28 3:43:20

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张（Windows/Linux）

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

编程新知 2025/11/30 10:30:15

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2026/2/5 2:28:27

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2026/2/9 3:25:41

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版&#xff0c;莫兰迪调色板清新简约工作汇报PPT模版&#xff0c;莫兰迪时尚风极简设计PPT模版&#xff0c;大学生毕业论文答辩PPT模版&#xff0c;莫兰迪配色总结计划简约商务通用PPT模版&#xff0c;莫兰迪商务汇报PPT模版&#xff0c;…...

编程新知 2026/1/29 10:37:37

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/10/17 20:59:57

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2026/2/2 11:58:16

LOOI机器人的技术实现解析：从手势识别到边缘检测

LOOI机器人作为一款创新的AI硬件产品&#xff0c;通过将智能手机转变为具有情感交互能力的桌面机器人&#xff0c;展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家&#xff0c;我将全面解析LOOI的技术实现架构&#xff0c;特别是其手势识别、物体识别和环境…...

编程新知 2025/6/10 21:22:04