本文详细讲解如何利用HTML5 Canvas标签结合JavaScript实现经典的黑客帝国数字雨背景特效。通过定义画布、初始化字符数组、控制字符串下落逻辑及窗口自适应调整，提供完整的代码示例与分步解析，帮助开发者快速掌握动态图形渲染技巧。
制作过程如下：
第一步，在HTML中定义标签以创建画布元素。
<canvas id="canvas"></canvas>
第二步，进入JavaScript逻辑部分，首先声明所需的全局变量。参考代码展示了如何获取画布实例、获取2D上下文对象、定义随机字符源字符串，以及设定窗口宽高、每条字符串的长度和显示的字符串总数。
/* 获取画布 */
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
/* 定义一个字符串数组，后面字符串会从里随机选值 */
var text = "SAFAF1D56FLK43F7PHM76VC9XNJL23";
/* 定义 w为窗口宽度，h为窗体高度 */
var w=window.innerWidth;
var h=window.innerHeight;
/* 设置len为20，其为背景里每条字符串的长度 */
var len = 20;
/* 设置num为100，窗口一共显示100条字符串 */
var num = 100;
/* 定义数组，里面存取每条字符串的字符与位置 */
var arr=[];
/* 画布宽等于窗口宽 */
canvas.width=window.innerWidth;
/* 画布高等于窗口高 */
canvas.height=window.innerHeight;
第三步，初始化存储每条下落字符串信息的数组。如代码所示，通过循环为每条字符串分配随机的X轴位置（基于窗口宽度）和Y轴初始位置（基于窗口高度并减去偏移量），此时字符内容暂为空数组。
/* 初始化字符串数组 */
for(let i=0;i<num;i++){
/* 用.push方法给arr数组添加值 */
arr.push({
/* 字符先为空 */
str:[],
/* x轴位置为窗口宽度乘上一个0带1的随机数 */
x: parseInt(w*Math.random()),
/* y轴位置为窗口高度乘上一个0带1的随机数，再减个150把，可以为负数 */
y: parseInt(h*Math.random()-150)
})
}
第四步，实现绘制每条字符串的逻辑。参考函数，遍历所有字符串对象，为每个字符串生成指定长度的随机字符序列，并设置字体样式（如20px FangSong），最后利用fillText方法将字符绘制在画布上。
/* 绘制每条字符串 */
function txt(){
/* 给个循环，共绘制num条 */
for(let i=0;i<num;i++){
/* 设置变量letter为当前arr数组里的第i条字符串 */
var letter = arr[i];
/* 让字符串的字符为空 */
letter.str = [];
/* 给个循环，一个字符一个字符的拼接成字符串 */
for(let k=0;k<len;k++){
/* 随机选取text里的一个字符 */
letter.str.push(text[Math.floor(Math.random() * text.length)]);
}
/* 再来循环，开始绘制渲染字符串的每个字符 */
for(let j=0;j<len;j++){
if(j==len-1){
/* 第一个字符为白色 */
ctx.fillStyle = `rgb(255, 255, 255)`;
}else{
/* 后面的为绿色，慢慢变不透明 */
ctx.fillStyle = `rgba(0, 255, 21,${j*0.15})`;
}
/* 渲染字符 */
ctx.font = "20px FangSong";
ctx.fillText(letter.str[j],letter.x,letter.y+j*15);
}
}
/* 调用更新 */
move();
}
第五步，更新字符串的位置以实现下落动画。如代码所示，在move函数中，将每条字符串的Y坐标增加固定值（例如3）。当字符串完全移出可视区域（Y坐标大于等于窗口高度）时，重新随机生成其X轴位置、初始Y坐标及清空字符数组，使其从顶部重新开始下落。
/* 让字符串移动，若某字符串出了可视区，则重新生成 */
function move(){
/* 来个循环，给全部字符串更新位置 */
for(let j=0;j<num;j++){
/* y轴位置加3 */
arr[j].y=arr[j].y+3;
/* 如果改字符已经走出窗口了重新赋值 */
if(arr[j].y>=h){
arr[j]={
str:[],
x: parseInt(w*Math.random()),
y: parseInt(h*Math.random()-150)
}
}
}
}
第六步，设置动画循环。参考代码，使用setInterval定时器，每隔50毫秒执行一次清屏、更新位置和重绘字符串的操作，从而形成流畅的动画效果。
setInterval(function(){
/* 清屏 */
ctx.clearRect(0,0,w,h);
/* 渲染 */
move();
/* 更新 */
txt();
},50);
第七步，处理窗口大小变化事件。如代码所示，绑定window.onresize事件，当浏览器窗口大小改变时，重新设置画布的宽高以匹配新的窗口尺寸，并重置字符串数组，确保画布始终铺满屏幕。
/* 绑定窗口大小发生改变事件，重新绘制字符串数组，让canvas随时铺满浏览器可视区 */
window.onresize=resizeCanvas;
function resizeCanvas(){
w=canvas.width=window.innerWidth;
h=canvas.height=window.innerHeight;
/* 重新给全部字符串赋值 */
for(let j=0;j<num;j++){
arr[j]={
str:[],
x: parseInt(w*Math.random()),
y: parseInt(h*Math.random()-150)
}
}
}
resizeCanvas();
完整实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
background-color: rgb(0, 0, 0);
}
canvas{
position: fixed;
top: 0;
left: 0;
z-index: -1;
}
h1{
font-family: 'FangSong';
position: fixed;
top: 50%;
left: 50%;
transform: translate(-40%,-50%);
font-size: 3em;
color: rgb(255, 255, 255);
text-shadow: 0 0 10px rgb(30, 255, 0),
0 0 20px rgb(30, 255, 0),
0 0 30px rgb(30, 255, 0),
0 0 50px rgb(30, 255, 0);
}
</style>
</head>
<body>
<h1>北极光之夜。</h1>
<canvas id="canvas"></canvas>
<script>
/* 获取画布 */
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext('2d');
/* 定义一个字符串数组，后面字符串会从里随机选值 */
var text = "SAFAF1D56FLK43F7PHM76VC9XNJL23";
/* 定义 w为窗口宽度，h为窗体高度 */
var w=window.innerWidth;
var h=window.innerHeight;
/* 设置len为20，其为背景里每条字符串的长度 */
var len = 20;
/* 设置num为100，窗口一共显示100条字符串 */
var num = 100;
/* 定义数组，里面存取每条字符串的字符与位置 */
var arr=[];
/* 画布宽等于窗口宽 */
canvas.width=window.innerWidth;
/* 画布高等于窗口高 */
canvas.height=window.innerHeight;
/* 绑定窗口大小发生改变事件，重新绘制字符串数组，让canvas随时铺满浏览器可视区 */
window.onresize=resizeCanvas;
function resizeCanvas(){
w=canvas.width=window.innerWidth;
h=canvas.height=window.innerHeight;
/* 重新给全部字符串赋值 */
for(let j=0;j<num;j++){
arr[j]={
str:[],
x: parseInt(w*Math.random()),
y: parseInt(h*Math.random()-150)
}
}
}
resizeCanvas();
/* 初始化字符串数组 */
for(let i=0;i<num;i++){
/* 用.push方法给arr数组添加值 */
arr.push({
/* 字符先为空 */
str:[],
/* x轴位置为窗口宽度乘上一个0带1的随机数 */
x: parseInt(w*Math.random()),
/* y轴位置为窗口高度乘上一个0带1的随机数，再减个150把，可以为负数 */
y: parseInt(h*Math.random()-150)
})
}
/* 绘制每条字符串 */
function txt(){
/* 给个循环，共绘制num条 */
for(let i=0;i<num;i++){
/* 设置变量letter为当前arr数组里的第i条字符串 */
var letter = arr[i];
/* 让字符串的字符为空 */
letter.str = [];
/* 给个循环，一个字符一个字符的拼接成字符串 */
for(let k=0;k<len;k++){
/* 随机选取text里的一个字符 */
letter.str.push(text[Math.floor(Math.random() * text.length)]);
}
/* 再来循环，开始绘制渲染字符串的每个字符 */
for(let j=0;j<len;j++){
if(j==len-1){
/* 第一个字符为白色 */
ctx.fillStyle = `rgb(255, 255, 255)`;
}else{
/* 后面的为绿色，慢慢变不透明 */
ctx.fillStyle = `rgba(0, 255, 21,${j*0.15})`;
}
/* 渲染字符 */
ctx.font = "20px FangSong";
ctx.fillText(letter.str[j],letter.x,letter.y+j*15);
}
}
/* 调用更新 */
move();
}
/* 让字符串移动，若某字符串出了可视区，则重新生成 */
function move(){
/* 来个循环，给全部字符串更新位置 */
for(let j=0;j<num;j++){
/* y轴位置加3 */
arr[j].y=arr[j].y+3;
/* 如果改字符已经走出窗口了重新赋值 */
if(arr[j].y>=h){
arr[j]={
str:[],
x: parseInt(w*Math.random()),
y: parseInt(h*Math.random()-150)
}
}
}
}
setInterval(function(){
/* 清屏 */
ctx.clearRect(0,0,w,h);
/* 渲染 */
move();
/* 更新 */
txt();
},50);
</script>
</body>
</html>
至此，关于使用Canvas制作炫酷黑客帝国数字雨背景的HTML+CSS+JS教程介绍完毕。如需了解更多相关前端特效内容，请查阅本站其他文章或继续浏览后续内容，感谢支持！