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

使用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>

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();