JavaScript实现字符雨效果

JavaScript实现字符雨效果

在网页上实现字符雨效果，可以通过在HTML的body元素中添加一个全屏的canvas元素，然后使用JavaScript编写一个动画效果，不断更新canvas中的字符颜色和位置，从而实现字符雨效果。

准备工作

1. 在HTML中添加一个全屏的canvas元素

<canvas id="matrix-canvas"></canvas>

<style>
    html,
    body,
    canvas {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
    }
</style>

1. 创建一个绘制字符的函数

function drawText(context, text, x, y, color) {
    context.fillStyle = color;
    context.font = "15px monospace";
    context.fillText(text, x, y);
}

实现步骤

1. 创建画布和画笔

const canvas = document.getElementById('matrix-canvas');
const context = canvas.getContext('2d');

1. 定义字符和颜色数组

const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
const colors = [
    '#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'
];

1. 定义字符产生的速度和密度

const textSpeed = 8;  //每帧移动的像素数
const textDensity = 15;  //字符行密度

1. 创建一个字符的类

class Text {
    constructor(x, y, speed, density) {
        this.x = x;
        this.y = y;
        this.speed = speed;
        this.density = density;
        this.char = chars[Math.floor(Math.random() * chars.length)];
        this.color = colors[Math.floor(Math.random() * colors.length)];
    }

    draw(context) {
        drawText(context, this.char, this.x, this.y, this.color);
    }

    update() {
        this.y += this.speed;
        if (this.y >= canvas.height) {
            this.y = -textDensity;
            this.char = chars[Math.floor(Math.random() * chars.length)];
            this.color = colors[Math.floor(Math.random() * colors.length)];
        }
    }
}

1. 创建字符数组并生成字符对象

let texts = [];

for (let i = 0; i < canvas.width / textDensity; i++) {
    const x = i * textDensity;
    const y = Math.random() * canvas.height;
    texts.push(new Text(x, y, textSpeed, textDensity));
}

1. 创建动画函数，更新字符位置并重绘画布

function animate() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < texts.length; i++) {
        texts[i].update();
        texts[i].draw(context);
    }
    requestAnimationFrame(animate);
}

animate();

示例说明

示例一：修改字符密度和字符颜色

将textDensity改为20，textSpeed改为10，colors数组增加一些颜色，如下：

const textSpeed = 10;  //每帧移动的像素数
const textDensity = 20;  //字符行密度
const colors = [
    '#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff',
    '#000', '#888', '#ddd'
];

效果：字符变少了，速度加快了，颜色多样了。

示例二：字符大小和字体修改

修改drawText函数中的font属性，将字体大小修改为25像素。修改Text类的构造函数，添加一个size属性，将字符大小也作为参数传入，并修改draw函数中的font属性。

function drawText(context, text, x, y, color) {
    context.fillStyle = color;
    context.font = "25px monospace";
    context.fillText(text, x, y);
}

class Text {
    constructor(x, y, speed, density, size) {
        this.x = x;
        this.y = y;
        this.speed = speed;
        this.density = density;
        this.size = size;
        this.char = chars[Math.floor(Math.random() * chars.length)];
        this.color = colors[Math.floor(Math.random() * colors.length)];
    }

    draw(context) {
        context.fillStyle = this.color;
        context.font = this.size + "px monospace";
        context.fillText(this.char, this.x, this.y);
    }

    update() {
        this.y += this.speed;
        if (this.y >= canvas.height) {
            this.y = -textDensity;
            this.char = chars[Math.floor(Math.random() * chars.length)];
            this.color = colors[Math.floor(Math.random() * colors.length)];
        }
    }
}

const textSpeed = 8;  //每帧移动的像素数
const textDensity = 15;  //字符行密度
const textSize = 25; //字符大小
const colors = [
    '#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff'
];

效果：字符变大了，字体也跟着变了。