canvas实现代码雨
学习抖音： @渡一前端必修课
效果图：
全部代码：
<!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实现代码雨
学习抖音： 渡一前端必修课 效果图： 全部代码： <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge">&…...
基于MFCC特征提取和HMM模型的语音合成算法matlab仿真
目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022A 3.部分核心程序 ............................................................................ %hmm是已经…...
多重网格算法的cuda编程
这里写自定义目录标题 多重网格算法介绍问题描述——五点差分法求解二维泊松方程五点差分法Gauss迭代算法限制算子介绍提升算子二重网格算法多重网格算法多重网格cuda代码编写串行代码mg.c两重网格cuda并行代码jacobi迭代的cuda编程device_jacobiMakefilecuda_mg.cucuda_mg.hma…...
DP（状态机模型）
大盗阿福 阿福是一名经验丰富的大盗。趁着月黑风高，阿福打算今晚洗劫一条街上的店铺。 这条街上一共有 N 家店铺，每家店中都有一些现金。 阿福事先调查得知，只有当他同时洗劫了两家相邻的店铺时，街上的报警系统才会启动&#x…...
按照指定的文件顺序进行scp传输
前言 scp 默认传输顺序是按照文件名进行排序的， 但我当前工作中遇到要验证两台机器的神经网络层的精度，需要把网络层的输入输出（假设有100层， 一共64G) 从机器1传输到机器2 ， 然后进行对比；这种情况下最好…...
小红书数据分析丨现实版模拟人生，这届网友热衷于“云开店”？
近期，小红书出现的一个神秘的热心群体，他们经常活跃在各种小店店主发布的求助帖评论区中，积极地帮助店主出谋划策，寻找小店经营的优化之道，成功帮助小店成功转亏为盈！江湖人称一一云股东。小红书话题#爱上帮…...
休闲卤味强势崛起：卤味零食成为新一代热门美食
随着人们生活水平的提高和消费观念的转变，休闲卤味逐渐成为了人们日常生活中的热门美食。据最新数据显示，2022年，我国卤味市场销售额达到了约2000亿元，预计到2025年将突破3000亿元大关。其中，休闲卤味以每年10%的速度持…...
自除数-C语言
描述 给定两个整数 left 和 right ，返回一个列表，列表的元素是范围 [left, right] 内所有的 自除数。 1 < left < right < 104 自除数 是指可以被它包含的每一位数整除的数，自除数 不允许包含 0 。例如，128 是一个 自除…...
-bash: ./startup.sh: Permission denied解决
今天在Linux上启动Tomcat，结果弹出：-bash: ./startup.sh: Permission denied 的提示。 这是因为用户没有权限，而导致无法执行。用命令chmod 修改一下bin目录下的.sh权限就可以了。 在Tomcat的bin目录下 ，输入命令行 ：c…...
Java课题笔记~ AOP 概述
AOP 简介 AOP（Aspect Orient Programming）面向切面编程。 面向切面编程是从动态角度考虑程序运行过程。 AOP的底层，就是采用动态代理的方式实现的。 采用了两种代理：JDK动态代理、CGLIB动态代理。 JDK动态代理：使…...
真我V3 5G（RMX2200 RMX2201）解锁刷机全过程
安卓系统新Rom包为GSI，更具有通用性，可以比较放心刷。 原厂系统垃圾多、广告多，甚至热点功能不支持ipv6，严重偏离热点机的定位。 主要参考 https://www.bilibili.com/read/cv20730877/https://www.bilibili.com/read/cv2073087…...
springCache-缓存
SpringCache 简介：是一个框架，实现了基于注解的缓存功能，底层可以切换不同的cache的实现，具体是通过CacheManager接口实现 使用springcache,根据实现的缓存技术，如使用的redis,需要导入redis的依赖包 基于map缓存 …...
【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聚合速率…...
【Spring Boot】Thymeleaf模板引擎 — Thymeleaf的高级用法
Thymeleaf的高级用法 主要介绍Thymeleaf的内联、内置对象、内置变量等高级用法。 1.内联 虽然通过Thymeleaf中的标签属性已经几乎满足了开发中的所有需求，但是有些情况下需要在CSS或JS中访问后台返回的数据。所以Thymeleaf提供了th:inline"text/javascript/…...
用html+javascript打造公文一键排版系统13：增加半角字符和全角字符的相互转换功能
一、实践发现了bug和不足 今天用了公文一键排版系统对几个PDF文件格式的材料进行文字识别后再重新排版，处理效果还是相当不错的，节约了不少的时间。 但是也发现了三个需要改进的地方： （一）发现了两个bug：…...
元宇宙3D数字虚拟客服打造年轻化、数字化营销新品牌
融合了元宇宙、AI和云计算等技术的虚拟数字人，成为元宇宙数字内容交互的载体，将现实世界中的人与虚拟数字世界的场景、模型及产品链接起来，特别是为电力企业打造的电力元宇宙平台，带来营销宣传多重好处的同时，树立了数…...
micromamba快速安装（windows版本）
快速安装 Micromamba Micromamba 是一个静态链接的 C++ 可执行文件，在 Windows 上就是一个 micromamba.exe 文件，下载下来就直接可以用，甚至都不需要专门安装。唯一需要做的就是设置 Shell 的 Profile 文件，使 micromamba 成为可以在命令行里调用的一个命令。 Micromamba…...
HTML ＜source＞ 标签
实例 拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）： <audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">Your browser does n…...
香港第一金：加息预期仍令贵金属承压，黄金仍需关注破位情况
香港第一金基本面分析： 中国纸黄金交易通显示，全球最大黄金上市交易基金(ETF)截至06月27日持仓量为925.66吨，较上日减持1.44吨，本月止净减持13.90吨。 周二美国公布的上月新屋销售飙升12.2%，经季节调整后折合成年率为…...
C语言学习笔记 vscode使用外部console-11
前言 在默认情况下，我们运行C语言程序都是在vscode终端的，在小程序运行时这个是没有问题的，但是当程序变得复杂它就不好用了，这时我们可以将这个终端设置为外部console，这样方便处理更多、更复杂的程序。 步骤 1.点击…...
96 | Python 小项目—— 学生成绩管理系统
文章目录 项目概述功能点2. 登录界面3. 主页面4. 数据录入界面5. 数据删除界面6. 数据修改界面7. 数据查询界面8. 成绩排名界面9. 成绩分析界面10. 学生信息查询界面11. 运行和测试总结项目概述 学生成绩管理系统是一个简单的学生课程管理系统，旨在帮助学校或教育机构轻松管理…...
【uniapp使用web-view点击返回报错后返回不了】
问题及解决 问题解决 问题 使用web-view跳转到别人的网站之后点击返回报错，返回不了 解决 使用以下方法 <template><view></view> </template> <script> var wv;//计划创建的webview export default {onLoad() {// #ifdef APP-PL…...
Map Reduce教程_编程入门自学教程_菜鸟教程-免费教程分享
教程简介 MapReduce是一种编程模型，用于大规模数据集（大于1TB）的并行运算。概念"Map（映射）"和"Reduce（归约）"，是它们的主要思想，都是从函数式编程语…...
吉利科技携手企企通，打造集团化数智供应链系统
近日，吉利科技集团有限公司（以下简称“吉利科技”）联合企企通成功召开SRM采购供应链管理项目启动会。企企通与吉利科技高层、项目负责人与团队成员出席此次启动会。 双方将携手在企业供应商全生命周期管理、采购全流程、电子招投标、采购分析…...
2023河南萌新联赛第（四）场：河南大学 F - 小富的idea
2023河南萌新联赛第（四）场：河南大学 F - 小富的idea 时间限制：C/C 1秒，其他语言2秒 空间限制：C/C 262144K，其他语言524288K 64bit IO Format: %lld 题目描述 要注意节约 卷王小富最近又在内卷&a…...
总结线程池
什么是线程池 线程池（Thread Pool）是一种用于管理和复用线程的技术，它可以在多线程编程中有效地管理线程的创建、执行和销毁。是一种有效管理线程的机制，可以提高多线程编程的效率、性能和资源利用率。它在许多并发编程的场景中被…...
基础的 lftp 使用方法
lftp 是一个功能强大的文件传输工具，支持FTP、HTTP、SFTP、FISH等多种协议。它提供了一套丰富的命令，使得文件传输和管理更加简便。以下是一些基础的 lftp 使用方法： 连接到FTP服务器： lftp ftp://username:passwordhostname如果不…...
python之prettytable库的使用
文章目录 一 什么是prettytable二 prettytable的简单使用1. 添加表头2. 添加行3. 添加列4. 设置对齐方式4. 设置输出表格样式5. 自定义边框样式6. 其它功能 三 prettytable在实际中的使用 一 什么是prettytable prettytable是Python的一个第三方工具库，用于创建漂亮…...
google PGS 下一代id
前言：为了进一步增强用户的隐私及其多平台游戏体验，Play 游戏服务(PGS) 正在推出下一代玩家 ID，用户第一次玩游戏时，他们将始终被分配一个唯一的下一代玩家 ID，无论用户在什么设备或平台上玩游戏，该 ID 都将…...
【elasticsearch】关于elasticsearch的max_result_window限制问题的解决方式思考
事情起因：我们使用es作为日志搜索引擎，客户收集到的业务日志非常之大，每次查询后，返回页数较多，由于我们web界面限制每页返回150条，当客户翻到66页之后就会报错。 文章目录 前言 二、实验 1.默认生成20条数…...
网站怎么做短信ip限定/制作免费个人网站
思维导图思维导图如下计算机体系网络结构分层概述这里进行概述如下物理层物理层上传送的单位为比特，规定了网络的一些电器特定，主要负责0,1比特流与电子信号之间的转换，如果没有物理层，0,1 构成的比特流将会无法在物理介质中传播。…...
网页设计尺寸大小指的是什么/网站关键词优化排名软件
本节书摘来自异步社区《配置管理最佳实践》一书中的第1章，第1.1节，作者： 【美】Bob Aiello , Leslie Sachs著，更多章节内容可以访问云栖社区“异步社区”公众号查看 第I部分 配置管理核心实践 第1章 源代码管理 源代码管理是保护…...
农用地转建设用地结果查询网站/百度云搜索引擎入口
2019独角兽企业重金招聘Python工程师标准>>> 随着宽带的普及和网速的提高，人们上网冲浪时对网站打开速度的容忍度在不断降低，网站的打开速度已经成为可用性的前提，甚至直接影响网站的收入。 Google最近第一次完整地书面提出网页访…...
先做网站还是做APP/上海短视频推广
单片机中级项目13丨矩阵按键数码管移位显示 /******************************************************************************* * 实 验 名 : 动态显示数码管实验 * 使用的IO : 数码管使用P0,P2.2,P2.3,P2.4键盘使用P1 * 实验效果 : 按矩阵键盘分别显示在数码…...
wordpress 架构原理/单页面seo搜索引擎优化
估计我问推杆的倾角是多少度，很多人会回答不知道，其实优化杆面倾角有助于让球稳定地形成较快的正旋。杆面倾角对推杆来说很有必要，只要做出一点点改变，就能帮助到大家。当测试完之后，调整了着地角和杆面倾角࿰…...
河南外贸网站制作/推广app平台有哪些
开发 Qt for Python 应用程序会遇到很多不同的文件类型：ui, qrc, qml, pyproject 等。下面分别简单介绍一下它们。 Python文件 .py 在开发 Qt for Python 项目时，Python 文件是你最常遇见的文件格式。 值得注意的是，你可以抛开 .ui, .qrc,…...