当前位置：首页 > news >正文

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

news 来源：原创 2025/5/2 5:18:46

黑客帝国-字幕矩阵（字母雨）

效果预览
代码实现
思路解析
遗留问题

效果预览

话不多说，我们直接上效果：当页面加载完成，屏幕上会落下如瀑布般的绿色字母流，不断向下滑动，仿佛进入了黑客帝国的数字世界，营造出极具未来感和神秘感的视觉氛围（由于图片大小限制，无法上传动图）：
字母雨

代码实现

<!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 = 'QWERTYUIOPASDFGHJKLZXCVBNM';// 字体大小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 。除此之外，还能有更友好的方法规避这一问题吗？欢迎在评论区留言讨论！