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>

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

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

相关文章

flinksql sink to sr often fail because of nullpoint

flinksql or DS sink to starrocks often fail because of nullpoint flink sql 和 flink ds sink starrocks 经常报NullpointException重新编译代码 并上传到flink 集群 验证&#xff0c;有效 flink sql 和 flink ds sink starrocks 经常报NullpointException 使用flink-sta…

PHP流浪动物招领网站mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP流浪动物招领网站 是一套完善的web设计系统&#xff0c;对理解php编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。 下载链接 nullhttps://download.csdn.net/download/qq_41221322/88190168视频演示 …

观察混合云环境中 Kubernetes 可观测性的 6 种有效策略

在混合云环境中观察Kubernetes需要理解分布式系统的行为和性能。我下面这篇文章中的六个策略可以帮助实现这一目标。 2023年&#xff0c;原生云应用和平台迅速增长。组织不断努力最大化其应用程序的潜力&#xff0c;确保无缝的用户体验&#xff0c;并推动业务增长。混合云环境…

O2OA开发平台实施入门指南

O2OA&#xff08;翱途&#xff09;开发平台&#xff0c;是一款适用于协同办公系统开发与实施的基础平台&#xff0c;说到底&#xff0c;它也是一款快速开发平台。开发者可以基于平台提供的能力完成门户、流程、信息相关的业务功能开发。 既然定位为开发平台&#xff0c;那么开…

RocketMQ 5.x如何使用GRPC方式发送消费消息

这里是weihubeats,觉得文章不错可以关注公众号小奏技术&#xff0c;文章首发。拒绝营销号&#xff0c;拒绝标题党 RocketMQ版本 5.1.0 背景 我们都知道RocketMQ 5.x新增了proxy模式部署方式&#xff0c;也就是支持了GRPC的消费方式消费&#xff0c;所以今天我们来试试 本次…

SAN共享存储架构

SAN共享存储架构 概述 近年在高性能专用存储网络需求的驱使下&#xff0c;许多SAN存储系统应用于高性能计算网络系统、大型网站系统、非线性编辑系统等网络系统中&#xff0c;存储设备与计算机主机系统之间一对一的关系&#xff0c;被可供多个计算机主机共享读写同一个存储设…

解决Consider the following: If you want an embedded database (H2, HSQL or Derby)

问题描述&#xff1a; 2023-08-10 11:52:32.992 ERROR 13064 --- [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPLICATION FAILED TO START ***************************Description:Failed to configure a DataSource: url …

探究Vue源码:mustache模板引擎(10) 解决不能用连续点符号找到多层对象问题,为编译循环结构做铺垫

上文 探究Vue源码:mustache模板引擎(9) 将单层无喜欢结果tokens转为dom字符串 我们简单处理了 token转字符串的业务逻辑 但是 我们只处理了最贱的花括号 接下来 带着大家将井号的也处理一下 我们打开项目 将 www中的index.html代码改回之前的这样 <!DOCTYPE html> <h…

通过PMP考试的伙伴看过来!免试多拿一个证书!

有PMP电子证书或纸质证书的伙伴可以免考申领国家CSPM二级证书&#xff01;&#xff08;项目管理专业人员评价国标证书&#xff09;&#xff01;免试&#xff0c;多拿一个证书&#xff0c;真香&#xff01; 本周已经开始提交新一批名单! 现在持有PMP证书可以免培训、免考试申报…

改进的麻雀算法优化最大相关峭度解卷积(SCSSA-MCKD),实现早期微弱故障诊断,MATLAB代码实现

01 引言 由于一些设备的早期故障产生的冲击十分微弱&#xff0c;易被系统噪声干扰&#xff0c;如何有效地对设备的原始故障信号进行降噪并增强信号中微弱冲击成分&#xff0c;是进行该类部件早期故障诊断的关键。 最大相关峭度解卷积&#xff08;MCKD&#xff09;通过解卷积运算…

【UE】VS无法调试,不能进入断点、未命中断点、断点不可用解决办法

问题&#xff1a;通过 附加进程的方式 调试DS&#xff0c;部分代码可以打断点&#xff0c;部分无法打断点 原因&#xff1a;XP限制一次加载的dll符号不能超过500个 解决&#xff1a; WinR 打开regedit在 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manag…

【HTML】label 标签

在HTML中&#xff0c;<label> 标签用于为表单元素创建标签文本或标题。它可以与输入字段&#xff08;如文本框、单选按钮、复选框等&#xff09;和其他表单元素关联起来&#xff0c;以提高可用性和可访问性。 <label> 元素有两种常见的用法&#xff1a; 包裹方式…

【VUE 监听用户滑动】

监听滑动方法 一. touchstart、touchmove、touchend二.v-touch三. 自定义指令 一. touchstart、touchmove、touchend 在 Vue 中监听用户往哪个方向滑动可以通过添加事件监听器&#xff0c;然后在事件回调函数中判断滑动方向。常用的事件监听器有touchstart、touchmove、touche…

leetcode 399-除法求值

法一&#xff1a;并查集 分析示例1&#xff1a; a / b 2.0 a/ b 2.0 a/b2.0&#xff0c;说明 a 2 b a2b a2b&#xff0c; a a a和 b b b在同一个集合中 b / c 3.0 b/c3.0 b/c3.0&#xff0c;说明 b 3 c b3c b3c&#xff0c; b b b和 c c c在同一个集合中 求 a / c a/…

24届近5年重庆邮电大学自动化考研院校分析

今天给大家带来的是重庆邮电大学控制考研分析 满满干货&#xff5e;还不快快点赞收藏 一、重庆邮电大学 学校简介 重庆邮电大学简称"重邮"&#xff0c;坐落于直辖市-重庆市&#xff0c;入选国家"中西部高校基础能力建设工程”、国家“卓越工程师教育培养计划…

c51单片机16个按键密码锁源代码(富proteus电路图)

注意了&#xff1a;这个代码你是没法直接运行的&#xff0c;但是如果你看得懂&#xff0c;随便改一改不超过1分钟就可以用 #include "reg51.h" #include "myheader.h" void displayNumber(unsigned char num) {if(num1){P10XFF;P10P11P14P15P160;}else if…

PyCharm新手入门指南

安装好Pycharm后&#xff0c;就可以开始编写第一个函数&#xff1a;Hello World啦~我们就先来学习一些基本的操作&#xff0c;主要包含新建Python文件&#xff0c;运行代码&#xff0c;查看结果等等。 文章主要包含五个部分&#xff1a; 一、界面介绍 主要分为菜单栏、项目目录…

osi模型

OSI 模型&#xff08;Open Systems Interconnection model&#xff09;是一个用于计算机网络体系结构的参考模型&#xff0c;由国际标准化组织&#xff08;ISO&#xff09;在 1984 年制定&#xff0c;旨在定义不同层次上的通信协议&#xff0c;以促进不同厂商的设备在网络上进行…

JQuery——动画效果

jQuery 提供了多种动画效果&#xff0c;可以让你在网页中添加平滑的过渡和动态效果。以下是一些常见的 jQuery 动画效果及其用法&#xff1a; 1. 隐藏和显示&#xff1a; 通过调用 .hide() 和 .show() 方法可以实现元素的渐隐和渐现效果。 $(#myElement).hide(); // 隐藏元素…

开发工具Eclipse的使用之导入项目(import)

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Eclipse使用的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.导读 二.详细操作步骤 1.右击项…