矩阵雨背景特效（黑客帝国字符雨 Canvas 动画）

效果演示（真实可交互）

经典黑客帝国雨幕：整屏字符如瀑布般倾泻，每列头部随机重置形成错落节奏。拖动「下落速度」可让雨从细流变成暴雨，调整「字符密度」控制每一行排布多少个字符（字符越大越稀疏），「颜色」下拉提供经典绿、赛博青、霓虹紫与银白四种风格，点击「暂停/继续」可以随时冻结画面。实现上先用半透明黑色矩形覆盖全屏制造”拖尾”，再逐列绘制随机字符，字符下落到底部后以约 2.5% 概率随机重置，从而让每列长度不断变化、永不停歇。

完整代码

<canvas id="matrix" style="width:100%;height:340px;display:block;background:#02080a;"></canvas>

const canvas = document.getElementById('matrix');
const ctx = canvas.getContext('2d');
const CHARS = 'アイウエオカキクケコサシスセソタチツテトナニヌネノ0123456789ABCDEFXYZ$#@%&*';
let W, H, fontSize = 16, cols = 0, drops = [], last = 0;
const cfg = { speed: 8, density: 22, color: '#00ff41' };

function resize() {
  const r = canvas.getBoundingClientRect();
  const dpr = window.devicePixelRatio || 1;
  canvas.width = Math.round(r.width * dpr);
  canvas.height = Math.round(r.height * dpr);
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  W = r.width; H = r.height;
  fontSize = Math.max(12, Math.floor(r.width / cfg.density));
  cols = Math.floor(r.width / fontSize);
  drops = Array.from({ length: cols }, () => Math.floor(Math.random() * -50));
}
function draw() {
  ctx.fillStyle = 'rgba(2, 8, 10, 0.14)';   // 半透明黑 = 拖尾
  ctx.fillRect(0, 0, W, H);
  ctx.font = `${fontSize}px "Courier New", monospace`;
  for (let i = 0; i < cols; i++) {
    const ch = CHARS[Math.floor(Math.random() * CHARS.length)];
    ctx.fillStyle = cfg.color;
    ctx.fillText(ch, i * fontSize, drops[i] * fontSize);
    if (drops[i] * fontSize > H && Math.random() > .975) drops[i] = 0;
    drops[i]++;
  }
}
function loop(t) {
  if (t - last >= 1000 / cfg.speed) { draw(); last = t; }  // 按速度节流
  requestAnimationFrame(loop);
}
resize(); requestAnimationFrame(loop);
window.addEventListener('resize', resize);

参数说明

兼容性与性能

• 全部使用基础 Canvas 2D API（fillText / fillRect），兼容 IE9 之外的几乎所有浏览器。
• 已适配 devicePixelRatio，高分屏字符边缘清晰；ctx.setTransform 保证后续坐标始终是 CSS 像素。
• 渲染成本与列数成正比，一屏约 40-60 列，每帧绘制几十个字符，性能余量充足。
• 速度滑块实质是帧率上限，调小可以显著降低低端设备的 CPU 占用与发热。
• 建议在页面隐藏时用 document.visibilitychange 暂停 rAF；拖尾 alpha 的 fillRect 是全屏操作，尽量不要放大画布尺寸。

常见问题

Q: 为什么我的矩阵雨没有拖尾，只有独立字符？ 拖尾依赖每帧用半透明色覆盖全屏。如果每帧都 clearRect 清空画布，拖尾就会消失——请保留 fillStyle='rgba(2,8,10,0.14)' 的覆盖步骤。

Q: 想做成全屏固定背景怎么办？ 把 canvas 设为 position: fixed; inset: 0; z-index: -1，并在 resize 里以 window.innerWidth/innerHeight 计算画布尺寸即可。

Q: 中文字符会出现乱码吗？ 不会。Canvas 按 UTF-8 直接绘制字符串，中文、日文假名、emoji 都支持，只要字体支持即可。

Q: 字符列数变了导致布局跳动？ 密度改变或 resize 时列数会重算，这是正常现象；若想平滑过渡，可在 resize 中保持原 drops 数组长度并只调整 fontSize。