如果你曾看过电影《黑客帝国》，你一定对其中的“数字雨”效果印象深刻：大量绿色的字符在屏幕上从上而下地快速下落，仿佛进入了一个数字化的世界。
今天，我们将学习如何在网页中使用 JavaScript 和 HTML5
准备工作
鼠标右键新建文本文档
重命名新建的文档为 "数字雨.html "
鼠标右键选择在记事本中编辑
数字雨代码
复制以下代码在"数字雨.html"文件中保存，重新打开就能看到数字雨的效果了
数字雨效果
下面是具体代码解析~ 不感兴趣的朋友到此可以结束了 !
创建HTML和Canvas元素
首先，我们需要在HTML中创建一个
数字雨效果
在这个HTML文件中，我们创建了一个
JavaScript实现数字雨效果
接下来，我们需要用 JavaScript 来编写动画效果。将以下代码放入 script.js 文件中：
const width = document.getElementById("myCanvas").width = screen.availWidth;
const height = document.getElementById("myCanvas").height = screen.availHeight;
const ctx = document.getElementById("myCanvas").getContext("2d");
const arr = Array(Math.ceil(width / 10)).fill(0);
const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
// 绘制数字雨效果
function rain() {
ctx.fillStyle = "rgba(0,0,0,0.05)"; // 设置背景色为黑色，透明度为0.05
ctx.fillRect(0, 0, width, height); // 填充整个画布，使字符逐渐消失
ctx.fillStyle = "#0f0"; // 设置字体颜色为绿色（类似《黑客帝国》中的绿色）
arr.forEach(function (value, index) {
ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
// 更新每列的字符位置，若字符超出屏幕，重新从顶部开始
arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
});
}
// 每隔30毫秒调用一次rain函数，创建动画效果
setInterval(rain, 30);
代码详解
让我们一步步解析上面的 JavaScript 代码，帮助你理解数字雨是如何实现的。
1. 获取画布和设置尺寸
const width = document.getElementById("myCanvas").width = screen.availWidth;
const height = document.getElementById("myCanvas").height = screen.availHeight;
const ctx = document.getElementById("myCanvas").getContext("2d");- 首先，我们通过 getElementById("myCanvas") 获取到
- getContext("2d") 用于获取 2d 绘图上下文对象，它提供了绘制各种图形和文本的能力。
2. 创建字符数组
const arr = Array(Math.ceil(width / 10)).fill(0);
const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
- arr 数组用于存储每一列字符的当前Y坐标，初始时每列都从 0 开始。数组的长度是屏幕宽度除以10，表示每列的初始位置。
- str 是一个字符集，包括大写字母和数字。我们将从这个字符集中随机选择字符来显示。
3. 绘制数字雨
function rain() {
ctx.fillStyle = "rgba(0,0,0,0.05)";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#0f0"; // 设置字符颜色为绿色
arr.forEach(function (value, index) {
ctx.fillText(str[Math.floor(Math.random() * str.length)], index * 10, value + 10);
arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10;
});
}
- ctx.fillStyle = "rgba(0,0,0,0.05)" 设置了背景色的透明度，让上一帧的内容逐渐淡出，产生了流畅的数字雨效果。
- ctx.fillText() 用于绘制文本。每一列字符会根据随机选择的字符从 str 中显示出来。index * 10 确定了每列字符的位置，value + 10 控制了字符在Y轴上的下落位置。
- arr[index] = value >= height || value > 8888 * Math.random() ? 0 : value + 10; 这一行代码判断每列字符是否已经超出画布的底部。如果是，则将该列字符重置为顶部（Y坐标为0），否则字符继续下落。
4. 定时调用
setInterval(rain, 30);
- setInterval(rain, 30) 每隔 30 毫秒调用一次 rain() 函数，创建出连续不断的下落效果。
效果预览
运行这段代码后，你会看到浏览器中呈现出类似《黑客帝国》中的数字雨效果，绿色的字符在屏幕上不断下落，产生出一种动态的、视觉冲击力十足的效果。
修改与优化
- 改变字符样式：你可以修改 fillStyle 来更改字符的颜色，例如 ctx.fillStyle = "#00ff00"。
- 控制字符速度：通过调整 value + 10 和 setInterval(rain, 30) 的值，你可以控制字符下落的速度。
- 增加字符集：你可以修改 str 数组，添加更多的字符或者其他符号，使得数字雨效果更加丰富。
虽然这只是一个简单的动画效果，但它向你展示了如何利用 canvas 的绘图功能和 JavaScript 的定时器实现流畅的动态效果。
欢迎在评论区留言！