代码雨效果

致敬《黑客帝国》的经典代码雨效果。绿色的字符从屏幕顶部倾泻而下，创造出赛博朋克的视觉体验。

这个版本支持多种字符集（片假名、二进制、中文等）和配色方案，让你自定义属于自己的 Matrix。

字符集

• 片假名：经典的 Matrix 风格
• 二进制：0 和 1 的组合
• 十六进制：0-9, A-F
• 代码：编程关键字
• 中文：汉字字符

配色方案

• 经典绿：原版 Matrix 配色
• 赛博蓝：赛博朋克风格
• 警告红：危险警示风格
• 霓虹紫：蒸汽波风格
• 彩虹：多彩渐变

控制选项

• 速度：控制字符下落速度
• 密度：控制列的密集程度
• 暂停/继续：冻结动画
• 重置：重新生成

设计灵感

代码雨效果源自 1999 年的电影《黑客帝国》。在电影中，绿色的代码流代表着 Matrix——一个模拟现实的计算机程序。

这个视觉效果已经成为：

• 赛博朋克美学的标志性符号
• 程序员文化的象征
• 数字艺术的灵感来源

技术实现

// 核心绘制循环
function draw(timestamp: number) {
  // 半透明背景，产生拖尾效果
  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 绘制每一列
  for (const column of columns) {
    column.y += column.speed;
    
    // 头部字符更亮
    ctx.fillStyle = `rgba(255, 255, 255, ${column.opacity})`;
    ctx.shadowBlur = 10;
    
    // 绘制字符
    for (let i = 0; i < column.chars.length; i++) {
      const y = column.y - i * fontSize;
      ctx.fillText(column.chars[i], column.x, y);
    }
  }
  
  requestAnimationFrame(draw);
}

技术细节

• Canvas 2D 渲染，60fps 流畅动画
• 半透明背景产生拖尾效果
• 随机字符更新增加生动感
• 头部光晕效果
• 响应式设计，自适应窗口大小