您是否想知道如何将矩阵动画添加到网站。我愿意，所以我创建它。
要重新创建此功能，您需要在HTML内部使用一个帆布标签，几行CSS可以根据需要进行样式和几行JavaScript
行为什么帆布？
首先，您可能会想到这个问题 - “为什么帆布标签？没有casvas标签，我不能那样做吗？”
是的，您可以在不使用帆布标签的情况下执行此操作。但是画布很容易做到。
让我们创建它
首先在您的HTML中添加canvas标签，然后在高度，宽度等上添加一些样式。
<style>
#canvas {
width: 200px;
height: 200px;
/* more sytling if you want */
}
</style>
<canvas id="canvas"></canvas>
所有工作都是针对HTML＆CSS完成的。从这里js将做所有事情。
让我们写一些JS
使它易于理解，让我们在几个部分中打破它。
1）首先，我们获得了帆布元素及其2D上下文的引用，我们将
用于绘制画布：
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
在第一行，我们选择了帆布元素。您可以根据需要执行此操作，我们可以使用document.querySelector()，也可以对此使用其他库 jQuery 。您只需要选择元素并创建其2D上下文，以便您可以编辑它。
2）接下来，我们定义了将在动画中使用的一些变量。 fontSize变量确定将在画布上绘制的字符的大小。 columns变量计算了可以根据画布的宽度和字体大小来安装在画布上的列数。 drops数组将跟踪每列的y坐标：
const fontSize = 10;
const columns = canvas.width / fontSize;
const drops = new Array(columns).fill(1);
由于所有列将在动画启动时都位于顶部，因此用1表示每列的第一行。
3）现在创建一个魔术发生的函数。我将其命名为draw，您可以将其命名为任何您想要的任何东西。此功能将被重复调用以更新画布上的动画。首先，我们将上下文的填充样式设置为半透明的黑色，并用它填充整个画布。这会对角色掉下画布时产生褪色效果：
function draw() {
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
4）接下来，我们将填充样式设置为绿色，并将字体设置为由fontSize变量确定的尺寸的Arial字体。这种绿色填充样式将是文本的颜色。您可以在step 2上创建另一个变量，可以在其中存储文本的颜色，以便可以在运行时间轻松更改它。还有您最喜欢的字体家庭的字体 arial 。
ctx.fillStyle = "#0f0";
ctx.font = fontSize + "px arial";
5）然后，我们循环遍历每一列，并在其当前位置绘制一个随机字符。通过生成33和126之间的随机数（ASCII代码可打印字符）并使用String.fromCharCode方法将其转换为字符串来选择该字符：
for (let i = 0; i < drops.length; i++) {
const text = String.fromCharCode(Math.floor(Math.random() * 94 + 33));
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
/* arguments of ctx.fillText()*/
/* ctx.fillText(textToAdd, xPositonOfTheText, yPositionOfTheText) */
}
在此for loop变量中，i存储当前列的索引。
因此
类似yposition thetext =当前列的当前行索引（或drop [i]）x fontsize。
6）绘制字符后，我们检查它是否已到达画布的底部。如果有，并且一个随机数大于0.975，我们将其位置重置为0，以便它再次从顶部开始掉落：
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
为什么是随机数？
使所有列都具有不同的行索引，否则所有列都开始在一起，它们将永远在一起。提醒 - 如果块将在for loop
如果您不添加随机数检查，那将是此
7）最后，我们将每列的y坐标递增，以便字符在每个迭代中逐行移动：
drops[i]++;
此增量也在for循环内部。
8）要启动动画，我们使用setInterval函数每33毫秒一次调用draw函数：
setInterval(draw, 33);
我应该从步骤4到步骤7清除所有代码块在draw函数
结束
此动画不仅限于矩阵动画。您可以用ð§emoji替换随机文本以创造雨水效应。可以做更多的事情。
和
这是完整的代码
<canvas id="canvas"> </canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const fontSize = 10;
const columns = canvas.width / fontSize;
const drops = new Array(columns).fill(1);
function draw() {
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#00f00077";
ctx.font = fontSize + "px arial";
for (let i = 0; i < drops.length; i++) {
const text = String.fromCharCode(Math.floor(Math.random() * 94 + 33));
ctx.fillText(text, i * fontSize, drops[i] * fontSize);
if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
drops[i] = 0;
}
drops[i]++;
}
}
setInterval(draw, 33);
</script>
<style>
#canvas {
width: 100%;
height: 100%;
}
</style>