如何修改JavaScript矩阵雨效果，使其下落显示指定名称John Smith

原脚本的矩阵雨是随机字符，现在要改成每列从上到下依次循环显示“John Smith”，同时保留原有的拖影效果，修改方案如下：

修改后的JavaScript代码 #

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

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

// 替换为目标字符串
const targetText = "John Smith";
const fontSize = 16;
const columns = canvas.width / fontSize;

// 存储每列的下落位置和当前字符索引
const rainDrops = [];

for (let x = 0; x < columns; x++) {
    // 初始化：下落位置为1，字符索引随机（让各列不同步，更自然）
    rainDrops[x] = {
        position: 1,
        charIndex: Math.floor(Math.random() * targetText.length)
    };
}

const draw = () => {
    // 保留原拖影效果的半透明覆盖层
    context.fillStyle = 'rgba(0, 0, 0, 0.05)';
    context.fillRect(0, 0, canvas.width, canvas.height);
    
    context.fillStyle = '#0F0';
    context.font = fontSize + 'px monospace';

    for (let i = 0; i < rainDrops.length; i++) {
        const drop = rainDrops[i];
        // 按当前索引取目标字符串的字符
        const text = targetText.charAt(drop.charIndex);
        context.fillText(text, i * fontSize, drop.position * fontSize);
        
        // 下落到底部后重置位置，并重置字符索引
        if (drop.position * fontSize > canvas.height && Math.random() > 0.975) {
            drop.position = 0;
            drop.charIndex = 0; // 重置为第一个字符，重新开始循环
        }
        
        // 下落一步，同时字符索引递增（循环）
        drop.position++;
        drop.charIndex = (drop.charIndex + 1) % targetText.length;
    }
};

setInterval(draw, 30);

对应的HTML代码 #

<canvas id="Matrix"></canvas>

关键修改说明 #

• 把原有的随机字符池替换为固定的targetText = "John Smith"
• 给每个雨滴列新增charIndex属性，用来跟踪当前显示的是目标字符串的第几个字符
• 每次下落时，字符索引递增并通过取模% targetText.length实现循环显示
• 列初始化时给charIndex设置随机值，避免所有列完全同步，更贴近原脚本的自然效果
• 保留了原脚本的拖影逻辑（半透明黑色覆盖层）和随机重置机制

内容的提问来源于stack exchange，提问作者Matteo Linux