当前位置：首页 > JavaScript

js实现代码雨

2026-04-03 21:07:00JavaScript

实现思路

使用HTML5的Canvas元素结合JavaScript动态生成代码雨效果。核心原理是创建多个垂直下落的字符，模拟《黑客帝国》中的经典场景。

HTML结构

<!DOCTYPE html>
<html>
<head>
    <title>代码雨</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="script.js"></script>
</body>
</html>

JavaScript实现

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const chars = "01";
const fontSize = 16;
const columns = canvas.width / fontSize;
const drops = [];

for (let i = 0; i < columns; i++) {
    drops[i] = 1;
}

function draw() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = '#0F0';
    ctx.font = fontSize + 'px monospace';

    for (let i = 0; i < drops.length; i++) {
        const text = chars[Math.floor(Math.random() * chars.length)];
        ctx.fillText(text, i * fontSize, drops[i] * fontSize);

        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
            drops[i] = 0;
        }

        drops[i]++;
    }
}

setInterval(draw, 33);

window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

效果增强技巧

修改字符集可以增加多样性：

js实现代码雨

const chars = "01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン";

添加渐变色效果：

js实现代码雨

const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, '#0F0');
gradient.addColorStop(1, '#0A0');
ctx.fillStyle = gradient;

性能优化

使用requestAnimationFrame替代setInterval：

function animate() {
    draw();
    requestAnimationFrame(animate);
}
animate();

添加帧率控制：

let lastTime = 0;
const fps = 30;
const fpsInterval = 1000 / fps;

function animate(timeStamp) {
    if (timeStamp - lastTime > fpsInterval) {
        lastTime = timeStamp;
        draw();
    }
    requestAnimationFrame(animate);
}
animate();