Canvas实例篇：黑客帝国-字母矩阵（字幕雨）

登录 · 发表于 2025-9-18 22:10:26

效果预览

话不多说，我们直接上效果：当页面加载完成，屏幕上会落下如瀑布般的绿色字母流，不停向下滑动，仿佛进入了黑客帝国的数字天下，营造出极具将来感和秘密感的视觉氛围：

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>黑客帝国-字幕矩阵</title>
<style>
body {
overflow: hidden;
}
#canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// 获取屏幕对象
const screen = window.screen;
// 获取canvas元素，并设置画布宽高
const canvas = document.getElementById('canvas');
canvas.width = screen.width;
canvas.height = screen.height;
// 获取上下文
const ctx = canvas.getContext('2d');
// 用于存储每个字母的垂直位置
const letters = Array(256).fill(0);
// 字母表：随机字符
const alphabet = 'QWERTYUIOPASDFGHJKLZXCVBNM1234567890~!@#$%^&*';
// 字体大小
const fontSize = 28;
// 字幕下落速度下落速度不能太慢，否则会出现上下多个字母重叠，最好和fontSize一致
const fallSpeed = 28;
// 绘制函数
function draw() {
ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 绿色填充
ctx.fillStyle = '#0F0';
// 设置字体大小
ctx.font = `${fontSize}px Arial`;
// 遍历letters数组
letters.map((y_pos, index) => {
// 从字母表中随机选择一个字母
const randomLetter = alphabet[Math.floor(Math.random() * alphabet.length)];
// 每个字母间隔： fontSize + 5，防止两侧字母重叠
const x_pos = index * (fontSize + 5);
// 在指定位置绘制随机字母
ctx.fillText(randomLetter, x_pos, y_pos);
// 判断字幕是超出屏幕高度
letters[index] = (y_pos > screen.height + Math.random() * 1001) ? 0 : y_pos + fallSpeed;
});
// 实现动画
requestAnimationFrame(draw);
}
// 启动动画
draw();
</script>
</body>
</html>

复制代码

思绪剖析

准备工作：获取 Canvas 元素及其 2D 绘图上下文，并设置画布的宽高与屏幕同等，确保字母雨可以或许覆盖整个页面。
数据初始化：界说存储字母垂直位置的数组、字母表、着落速率、字体巨细和字母隔断等关键参数，为后续的绘制和动画效果奠基底子。
绘制字母：在每次绘制时，先使用半透明玄色添补画布，模拟配景的深邃感，然后遍历字母位置数组，随机选择字母并绘制在相应位置。
动画实现：通过requestAnimationFrame函数不停调用绘制函数，实现字母的一连着落动画，同时更新字母的位置，当字母超出屏幕底部时，将其重置到顶部，形成循环着落的效果。

遗留标题

fallSpeed标题：在代码中有一行表明 // 字幕着落速率着落速率不能太慢，否则会出现上下多个字母重叠，最好和fontSize同等，究其原因是由于 requestAnimationFrame 渲染标题，如果着落速率太快，即字母渲染太快，上一个字母还没有完全下移，下一个字母就生成了，造成上下多个字母重叠。以是为了规避这一标题，我只能强行让着落速率≥字体巨细。固然，我们还可以改用 setInterval 的方式循环渲染动画，而不采取 requestAnimationFrame 。除此之外，还能有更友爱的方法规避这一标题吗？欢迎在批评区留言讨论！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告

Canvas实例篇：黑客帝国-字母矩阵（字幕雨）

本帖子中包含更多资源

宁睿