使用canvas实现代码雨高级升阶版【附带源码和使用方法】

文章目录

  • 前言
  • 基本绿色的
  • 彩色版本
  • 飘散雪花状
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:前端面试
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

基本绿色的

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;overflow: hidden;}</style>
</head><body><canvas id="canvas"></canvas><script src="index.js"></script></body></html>
let canvas = document.querySelector("canvas")let ctx = canvas.getContext("2d");canvas.width = screen.availWidth;
canvas.height = screen.availHeight;let str = "鋜 斗 z s y y d s 加 油 干".split(" ");let arr = Array(Math.ceil(canvas.width / 10)).fill(0);
const rain = () => {ctx.fillStyle = "rgba(0,0,0,0.05)";ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = "#0f0";arr.forEach((item, index) => {ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10)arr[index] = item > canvas.height || item > Math.random() * 10000 ? 0 : item + 10;})
}setInterval(rain, 40)

彩色版本

在这里插入图片描述
html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;overflow: hidden;}</style>
</head><body><canvas id="canvas"></canvas><script src="index.js"></script></body></html>

js

let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
canvas.width = screen.availWidth;
canvas.height = screen.availHeight;let str = "鋜 斗 z s y y d s 加 油 干".split(" ");let arr = Array(Math.ceil(canvas.width / 10)).fill(0);
const colors = ["#0f0", "#f00", "#00f", "#ff0", "#0ff"]; // 添加颜色数组const rain = () => {ctx.fillStyle = "rgba(0,0,0,0.05)";ctx.fillRect(0, 0, canvas.width, canvas.height);arr.forEach((item, index) => {const randomColor = colors[Math.floor(Math.random() * colors.length)]; // 随机选取颜色ctx.fillStyle = randomColor; // 使用随机颜色ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, item + 10);arr[index] = item > canvas.height || item > Math.random() * 10000 ? 0 : item + 10;});
};setInterval(rain, 40);

飘散雪花状

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;overflow: hidden;}</style>
</head><body><canvas id="canvas"></canvas><script src="index.js"></script></body></html>
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext("2d");
canvas.width = screen.availWidth;
canvas.height = screen.availHeight;let str = "鋜 斗 加 油 猛 猛 干 ".split(" ");
let strIndex = 0;let arr = Array(Math.ceil(canvas.width / 10)).fill(0);class Drop {constructor() {this.x = Math.random() * canvas.width;this.y = Math.random() * -canvas.height;this.speed = Math.random() * 2 + 2;this.color = "#" + Math.floor(Math.random() * 16777215).toString(16);this.height = Math.random() * 20 + 10;this.text = str[strIndex];strIndex = (strIndex + 1) % str.length;}update() {this.y += this.speed;if (this.y > canvas.height) {this.y = Math.random() * -canvas.height;this.x = Math.random() * canvas.width;this.color = "#" + Math.floor(Math.random() * 16777215).toString(16);this.height = Math.random() * 20 + 10;this.text = str[strIndex];strIndex = (strIndex + 1) % str.length;}}draw() {ctx.fillStyle = "rgba(0, 0, 0, 0.1)";ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = "white";ctx.font = this.height + "px Arial";ctx.fillText(this.text, this.x, this.y + this.height);}
}let drops = [];for (let i = 0; i < 100; i++) {drops.push(new Drop());
}const animate = () => {drops.forEach((drop) => {drop.update();drop.draw();});requestAnimationFrame(animate);
};animate();

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

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

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

相关文章

SS8812T 36V/1.6A 两通道 H 桥驱动芯片 替代DRV8812

SS8812T 为打印机和其它电机一体化应用提 供一种双通道集成电机驱动方案。 SS8812T 有两 路 H 桥驱动&#xff0c;每个 H 桥可提供最大输出电流 1.6A (在 24V 和 Ta 25C 适当散热条件下)&#xff0c;可驱动两 个刷式直流电机&#xff0c;或者一个双极步进电机&#xff0…

2311skia,本地惊心动魄的编译skia的x86版本

首先,感谢steampp,这样可以随时访问github.不然,根本干不了活. 第一步,学习并下载skia 正确编译skia,有人家的辛苦工作 借用github action编译skia方法 本地编译的1个教程 对我来说,这一步是完成不了的: cd skia python2 tools/git-sync-deps //或者加上.exe变成 python2.ex…

每日一练2023.11.30——验证身份【PTA】

题目链接 &#xff1a;验证身份 题目要求&#xff1a; 一个合法的身份证号码由17位地区、日期编号和顺序编号加1位校验码组成。校验码的计算规则如下&#xff1a; 首先对前17位数字加权求和&#xff0c;权重分配为&#xff1a;{7&#xff0c;9&#xff0c;10&#xff0c;5&a…

windows文件删除权限

一、普通文件 这里指的是所有可以被随意删除的文件。 二、可更改权限的文件 如果想要删除的文件无法被删除&#xff0c;那大概是权限不够&#xff0c;这时候&#xff1a;鼠标右键、属性、安全、编辑、选择相应的组或用户&#xff08;如果不知道哪个可以全选&#xff0c;反正…

Typescript学习笔记: 类型限定、流程语句的细节、面向对象思想(封装、继承、多态)抽象类方法、接口和实现类、枚举等示例

作为JavaScript的超集Typescript非常值得大家学习的。 类型限定、流程语句的细节、面向对象思想&#xff08;封装、继承、多态&#xff09;抽象类方法、接口和实现类、枚举等 主要的是面向对象编程思想 下面是Typescript学习笔记&#xff1a; Typescript学习笔记&#xff1…

麒麟操作系统进入单用户模式

Kylin V4 桌面版&#xff1a; 启动系统后&#xff0c;在启动菜单界面选择 Kylin 4.0.2 高级选项后回车。 在高级模式选项下选择第二行 recovery mode 模式后&#xff0c;按 e 编辑。 按 e 后如下图&#xff0c;找到 linux 开头的一行&#xff0c;修改 ro 为 rw 后&#xff0c…

[c语言c++]手写你自己的swap交换函数

函数传参有按值传递&#xff0c;指针传递&#xff0c;引用传递&#xff0c;分别看一下三种情况下的交换函数如何书写&#xff0c;应该使用哪种最方便。 当书写一个交换两个值的 swap 函数时&#xff0c;我们可以分别使用按值传参、指针传参和引用传参的方式来实现。下面是示例和…

北邮22级信通院数电:Verilog-FPGA(11)第十一周实验(2)设计一个24秒倒计时器

北邮22信通一枚~ 跟随课程进度更新北邮信通院数字系统设计的笔记、代码和文章 持续关注作者 迎接数电实验学习~ 获取更多文章&#xff0c;请访问专栏&#xff1a; 北邮22级信通院数电实验_青山如墨雨如画的博客-CSDN博客 目录 一.代码部分 1.1 counter_24.v 1.2 divid…

linux系统下的nginx服务安装

一. 环境 在安装nginx前&#xff0c;需要提前配置的环境包括 pcre&#xff1a;rewrite正则相关pcre:URL重写软件&#xff0c;实现伪静态\URL跳转等、SEO优化。 openssl&#xff1a;https加密访问用它 zlib&#xff1a;提供数据压缩用1.安装pcre 1.1 检查版本 执行&#xff…

Selenium——isDisplayed()、isEnabled()、isSelected()

判断页面是否存在某元素 Selenium没有直接提供判断是否存在的方法&#xff0c;可以使用findElements返回的数量判断&#xff1b;或者判断findElement是否抛出异常 webDriver.findElements(By.xpath("(//div[classel-button-group]//button)[1]")).size()isDisplaye…

@Transactional注解失效的几个场景

一、Transactional注解作用在修饰符为非public的方法&#xff0c;Transactional注解不起作用。 Service public class ComeServiceImpl implements ComeService {AutowiredUserMapper userMapper;OverrideTransactionalint saveUser() {User user new User("qitian"…

window10家庭版中文转专业版流程

1.确认当前为家庭中文版 2.用管理员权限打开cmd窗口 3.输入 dism /online /get-targeteditions &#xff0c;查询当前支持的升级的版本 4.专业版密钥&#xff1a;VK7JG-NPHTM-C97JM-9MPGT-3V66T 5.changepk.exe /productkey VK7JG-NPHTM-C97JM-9MPGT-3V66T

C#,《小白学程序》第二十三课:大数的除法(BigInteger Divide)

1 文本格式 /// <summary> /// 比较a&#xff0c;b的大小&#xff0c;返回1&#xff0c;0&#xff0c;-1 /// 数据从低位&#xff08;右&#xff09;往高位&#xff08;左&#xff09;存储; /// </summary> /// <param name"a"></param> ///…

【Qt绘图】之绘制坦克

使用绘图事件&#xff0c;绘制坦克。 效果 效果很逼真&#xff0c;想象力&#xff0c;有没有。 示例 代码像诗一样优雅&#xff0c;有没有。 包含头文件 #include <QApplication> #include <QWidget> #include <QPainter>绘制坦克类 class TankWidge…

【12】Python函数专题(下)

文章目录 1. 高阶函数1.1 以函数为参数1.2 以函数为返回值1.3 以函数为 参数和返回值2. 闭包3. 装饰器3.1 装饰器的引入3.2. 装饰器的使用3.3 装饰器强化练习🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔…

设计模式详解(三):工厂方法

目录导航 抽象工厂及其作用工厂方法的好处工厂方法的实现关系图实现步骤 工厂方法的适用场景工厂方法举例 抽象工厂及其作用 工厂方法是一种创建型设计模式。所谓创建型设计模式是说针对创建对象方面的设计模式。在面向对象的编程语言里&#xff0c;我们通过对象间的相互协作&…

模拟算法【2】

文章目录 &#x1f958;6. N 字形变换&#x1f372;题目&#x1fad5;算法原理&#x1f963;代码实现 &#x1f957;38. 外观数列&#x1f37f;题目&#x1f9c2;算法原理&#x1f9c8;代码实现 &#x1f958;6. N 字形变换 &#x1f372;题目 题目链接&#xff1a;6. N 字形变…

《对话品牌》——诚信铸就品质 创新引领未来

本期节目《对话品牌》栏目组邀请到了东莞市星韵科技有限公司董事长吕玮先生参加栏目录制&#xff0c;分享其企业故事&#xff0c;树立品牌形象&#xff0c;提升品牌价值&#xff01; 节目嘉宾&#xff1a;吕玮 节目主持人&#xff1a;杨楠 节目播出平台&#xff1a;中央新影…

TSINGSEE青犀AI视频智能分析系统的视频接入能力解析

视频智能分析技术是一种先进的人工智能技术&#xff0c;它能够对视频内容进行自动化的分析和理解。这种技术的主要特点包括实时性、自动化、准确性、可解释性等。 1&#xff09;实时性。视频智能分析技术能够在短时间内对大量的视频数据进行快速处理和分析&#xff0c;从而提供…

【笔记】Smali语法

Smali语法 Smali 是一种汇编语言&#xff0c;通常用于 Android 应用程序的反汇编和修改。Smali 代码是 Dalvik 虚拟机指令的文本表示形式。以下是一些常见的 Smali 语法元素&#xff1a; 1. 基本结构: Smali 文件是文本文件&#xff0c;通常以 .smali 扩展名结尾。每个 Smali…