当前位置：网站首页 > 技术文章 > 正文

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

myzbx 2025-01-11 15:34 51 浏览

如果你曾看过电影《黑客帝国》，你一定对其中的“数字雨”效果印象深刻：大量绿色的字符在屏幕上从上而下地快速下落，仿佛进入了一个数字化的世界。

今天，我们将学习如何在网页中使用 JavaScript 和 HTML5 <canvas> 元素实现类似的数字雨效果。即便你是编程一无所知的小白，也能通过这篇教程轻松掌握。

准备工作

鼠标右键新建文本文档

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

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

数字雨代码

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字雨效果</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
   <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>
</body>
</html>

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

创建HTML和Canvas元素

首先，我们需要在HTML中创建一个<canvas>元素。这个<canvas>将是我们绘制数字雨效果的地方。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字雨效果</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script src="script.js"></script>
</body>
</html>

在这个HTML文件中，我们创建了一个 <canvas> 元素，指定了 id="myCanvas"，同时为页面设置了背景为黑色，隐藏溢出内容，确保画布能够覆盖整个页面。

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") 获取到 <canvas> 元素，并设置其宽度和高度为屏幕的可用宽度和高度（screen.availWidth 和 screen.availHeight）。这样，画布会覆盖整个屏幕。
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 的定时器实现流畅的动态效果。

欢迎在评论区留言！

HTML 画布

上一篇：使用canvas实现简单的贪吃蛇游戏，html+css+js
下一篇：好程序员:前端JavaScript全解析——Canvas绘制形状(上)

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

准备工作

数字雨代码

创建HTML和Canvas元素

JavaScript实现数字雨效果

代码详解

1. 获取画布和设置尺寸

2. 创建字符数组

3. 绘制数字雨

4. 定时调用

效果预览

修改与优化

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿