用 Canvas 实现《黑客帝国》代码雨：自适应 120Hz、发光特效、音频与鼠标交互-育师

用 Canvas 实现《黑客帝国》代码雨：自适应 120Hz、发光特效、音频与鼠标交互

关键词：Canvas 动画、Matrix 代码雨、requestAnimationFrame、120Hz、高刷新率、前端性能优化、可视化特效

前言

在很多前端示例中，《黑客帝国》风格的Matrix Code Rain往往只是一个简单的 Canvas Demo：
随机字符 + 固定速度 + setInterval 刷新，看起来像，但并不像。

这篇文章记录的是一次偏工程化的实现尝试：
在不使用 WebGL、不依赖第三方库的前提下，仅基于HTML5 Canvas 2D + 原生 JavaScript，实现一个在视觉、性能和交互层面都尽量接近电影效果的 Matrix 代码雨动画。

如果你关注这些问题：

Canvas 动画如何正确使用requestAnimationFrame
如何在浏览器中适配60Hz / 120Hz / 高刷新率屏幕
如何在 Canvas 中实现Glow / Bloom 类似的发光效果
如何让动画响应鼠标与音频输入
如何避免“看起来卡但 FPS 很高”的假流畅

这篇内容会对你有参考价值。

实现目标说明

本实现主要围绕以下三个核心目标展开。

1️⃣ 字符流速度差异（更接近电影逻辑）

不同于常见的“每一帧完全随机”，这里将每一列字符视为一个独立的字符流对象，为其分配：

固定但不同的下落速度
不同的字符长度
连续的生命周期

这种做法显著提升了画面的“连续感”和“真实感”。

2️⃣ 亮头发光（Glow / Bloom）效果

Canvas 2D 并不支持真正的 Bloom，但可以通过合理使用：

shadowBlur
shadowColor
分层绘制（亮头 / 中段 / 尾部）

在不牺牲清晰度的前提下，实现接近电影的荧光发光效果，而不是整屏模糊。

3️⃣ 鼠标与音频节奏响应

为了让动画不只是“背景播放”，而是一个可被环境影响的系统：

鼠标靠近时，字符流会产生速度扰动
接入 Web Audio API，使用音频能量驱动整体节奏
无音频权限时自动降级，不影响主逻辑

帧率与性能设计（重点）

动画使用requestAnimationFrame作为唯一渲染入口，并通过运行时采样判断屏幕刷新率，实现：

普通显示器：稳定 60 FPS
高刷新率显示器：自动提升至 120 FPS
避免 setInterval 带来的时间漂移与掉帧问题

这也是很多 Canvas 示例中容易被忽略，但对实际体验影响极大的部分。

适合哪些使用场景？

技术博客 / 作品集的 Hero 背景
数据可视化或安全主题页面
Canvas / 前端动画学习示例
高刷新率显示器性能测试 Demo

结语

这个 Matrix Code Rain 并不是为了“复刻电影”，而是一次关于Canvas 动画边界、前端性能与交互设计的探索。

后续如果有时间，我会继续尝试：

WebGL / Shader 实现真正的 Bloom
基于节拍的音频驱动（BPM / Beat Detection）
将该效果工程化为可复用组件

如果你对Canvas 动画、高性能前端可视化感兴趣，可以关注我，后面会持续更新相关实践。

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>Matrix Pro Interactive</title><metaname="viewport"content="width=device-width, initial-scale=1.0"><style>html, body{margin:0;padding:0;background:black;overflow:hidden;}canvas{display:block;}</style></head><body><canvasid="matrix"></canvas><script>/* ================= Canvas ================= */constcanvas=document.getElementById("matrix");constctx=canvas.getContext("2d");/* 字体大小（影响：字符密度、性能、电影感） 建议范围：14 ~ 20 越小越密集，越大越“极客屏幕” */letwidth,height;constfontSize=16;/* 字符集（可替换为纯日文 / 纯数字 / 自定义符号） */constchars="アイウエオカキクケコサシスセソ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";letcolumns=[];letmouse={x:-9999,y:-9999};/* ================= Resize ================= */functionresize(){width=canvas.width=window.innerWidth;height=canvas.height=window.innerHeight;initColumns();}window.addEventListener("resize",resize);/* ================= Column Model ================= *//* 每列速度范围 决定整体“雨”的快慢层次 */constMIN_SPEED=1.5;// 最慢流速constMAX_SPEED=3.0;// 最快流速/* 每列字符长度范围 越长 → 拖尾更明显 越短 → 更跳动 */constMIN_LENGTH=5;constMAX_LENGTH=25;functioninitColumns(){constcount=Math.floor(width/fontSize);columns=[];for(leti=0;i<count;i++){columns.push({x:i*fontSize,y:Math.random()*height,speed:0.5+Math.random()*1.5,length:5+Math.floor(Math.random()*20)});}}/* ================= Mouse ================= */window.addEventListener("mousemove",e=>{mouse.x=e.clientX;mouse.y=e.clientY;});/* ================= Audio ================= */letaudioEnergy=0;navigator.mediaDevices.getUserMedia({audio:true}).then(stream=>{constaudioCtx=new(window.AudioContext||window.webkitAudioContext)();constanalyser=audioCtx.createAnalyser();analyser.fftSize=256;constsource=audioCtx.createMediaStreamSource(stream);source.connect(analyser);constdata=newUint8Array(analyser.frequencyBinCount);functionupdateAudio(){analyser.getByteFrequencyData(data);audioEnergy=data.reduce((a,b)=>a+b,0)/data.length/255;requestAnimationFrame(updateAudio);}updateAudio();}).catch(()=>{audioEnergy=0;});/* ================= FPS Adaptive ================= */lettargetFPS=60;letframeInterval=1000/targetFPS;letlastTime=0;letfpsSamples=[];functionadaptFPS(delta){fpsSamples.push(1000/delta);if(fpsSamples.length>30){constavg=fpsSamples.reduce((a,b)=>a+b)/fpsSamples.length;targetFPS=avg>90?120:60;frameInterval=1000/targetFPS;fpsSamples=[];}}/* ================= Draw ================= */functiondraw(now){constdelta=now-lastTime;if(delta<frameInterval){requestAnimationFrame(draw);return;}adaptFPS(delta);lastTime=now;/* 背景衰减 alpha 越小 → 残影越长 建议范围：0.04 ~ 0.1 */ctx.fillStyle="rgba(0, 0, 0, 0.08)";ctx.fillRect(0,0,width,height);ctx.font=fontSize+"px monospace";for(constcolofcolumns){constdx=col.x-mouse.x;constdy=col.y-mouse.y;constdist=Math.sqrt(dx*dx+dy*dy);letspeedBoost=dist<150?(1-dist/150)*2:0;letaudioBoost=audioEnergy*3;col.y+=col.speed+speedBoost+audioBoost;for(leti=0;i<col.length;i++){consty=col.y-i*fontSize;if(y<0||y>height)continue;constchar=chars[Math.floor(Math.random()*chars.length)];if(i===0){ctx.fillStyle="#eaffea";ctx.shadowColor="#00ff99";ctx.shadowBlur=12;}elseif(i<3){ctx.fillStyle="#00ff66";ctx.shadowBlur=0;}else{ctx.fillStyle="#006633";ctx.shadowBlur=0;}ctx.fillText(char,col.x,y);}ctx.shadowBlur=0;if(col.y-col.length*fontSize>height){col.y=-Math.random()*100;}}requestAnimationFrame(draw);}resize();requestAnimationFrame(draw);</script></body></html>