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