准备工作

鼠标右键新建文本文档

重命名新建的文档为 "数字雨.html "

鼠标右键选择在记事本中编辑

记事本中编辑

数字雨代码

复制以下代码在"数字雨.html"文件中保存，重新打开就能看到数字雨的效果了




    
    
    数字雨效果
    


    
   <script>
        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)"; 
            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;
            });
        }
        setInterval(rain, 30);
    </script>

下面是具体代码解析~ 不感兴趣的朋友到此可以结束了 !

创建HTML和Canvas元素

首先，我们需要在HTML中创建一个




    
    
    数字雨效果
    


    
    <script src="script.js"></script>

在这个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 的定时器实现流畅的动态效果。

欢迎在评论区留言！

王剑编程网

分享专业编程知识与实战技巧

不懂编程?不会写代码?也能制作《黑客帝国》风格的网页数字雨