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

最新推荐文章于 2025-05-02 12:37:58 发布

wuhen_n

最新推荐文章于 2025-05-02 12:37:58 发布

阅读量741

点赞数 13

分类专栏：页面特效与元素动画 Canvas开发攻略：基础+动画+特效文章标签：矩阵前端 javascript html5 canva可画 Canvas

本文链接：https://blog.csdn.net/wuhen_n/article/details/147652933

版权

页面特效与元素动画同时被 2 个专栏收录

18 篇文章

订阅专栏

Canvas开发攻略：基础+动画+特效

5 篇文章

订阅专栏

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

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

效果预览

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

代码实现

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