HTML黑客帝国同款炫酷字母雨 - 文章 - 开发者社区

0 1

写在前面

《黑客帝国》同款炫酷字母雨，无需安装软件，下载即可使用！Hello宝子们，继Python、C++字母雨后，本期小编给大家带来 HTML 版字母雨，文末下载后可以 直接打开运行 哦~

0 2

黑客帝国

《黑客帝国》（The Matrix）是由莉莉·沃卓斯基和拉娜·沃卓斯基（原名为安迪·沃卓斯基和拉里·沃卓斯基，后变性并改名）共同编剧和执导的一部科幻动作电影，于1999年3月31日在美国上映，由华纳兄弟影片公司出品。这部电影开创了科幻电影的新纪元，以其深度哲学探讨、创新的动作场面和特效技术闻名于世。

在《黑客帝国》的世界中，故事设定在近未来的一个反乌托邦世界。主角尼奥（Neo，由基努·李维斯饰演）是一名普通的网络黑客，他开始怀疑现实并非如其所见，并通过神秘的电脑程序“莫斐斯”接触到一个隐藏的真相：人类社会实际上被高度发达的人工智能系统——矩阵所控制。矩阵为机器创造的一个虚拟现实世界，其中所有人类都被连接到这个系统内，他们的意识被囚禁在模拟的20世纪末环境中，而身体则在现实世界的培养槽中作为能源供给机器使用。

莫斐斯（Morpheus，由劳伦斯·菲什伯恩饰演）是人类反抗组织的领袖，他坚信尼奥就是预言中的救世主，能够打破矩阵对人类的束缚，并引领人类走向自由。在另一位关键人物崔妮蒂（Trinity，由凯瑞-安·莫斯饰演）的帮助下，尼奥逐渐认识到自己的潜力，并最终觉醒成为能够操控矩阵规则的超级存在。

“字母雨”出现在电影的开端部分，当主角尼奥（Neo）在电脑前与神秘人物莫菲斯（Morpheus）进行非法通讯时，他的屏幕突然被绿色的数字流所占据，这些数字以矩阵形式快速下落，形成一种连续不断的、模拟计算机代码流动的效果。这一设计不仅具有强烈的视觉冲击力，还深刻地寓言了电影的核心主题——现实与虚拟世界的交织以及人类意识与机器控制之间的关系。

下面小编将带着大家一起用HTML实现字母雨的动态效果。

0 3

完整代码


                            
<!DOCTYPE html>
                            
<html>
                            

                            
<head>
                            
    <meta charset="utf-8">
                            
    <title>黑客帝国字母雨</title>
                            
</head>
                            

                            
<body onselectstart="false">
                            

                            
    <canvas id="canvas" height="100%" width="100%"></canvas>
                            

                            
    <style type="text/css">
                            
        html,
                            
        body {
                            
            margin: 0;
                            
            padding: 0;
                            
            overflow: hidden;
                            
        }
                            
</style>
                            

                            
    <script type="text/javascript">
                            

                            
        var canvas = document.getElementById('canvas');
                            
        var ctx = canvas.getContext('2d');
                            

                            
        canvas.height = window.innerHeight;
                            
        canvas.width = window.innerWidth;
                            

                            
        var texts = 'abcdefghigklmnopqrstuvwxyz'.split('');
                            
        var fontSize = 16;
                            
        var columns = canvas.width / fontSize;
                            
        var drops = [];
                            

                            
        for (var x = 0; x < columns; x++) {
                            
            drops[x] = 1;
                            
        }
                            

                            
        function draw() {
                            

                            
            ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
                            
            ctx.fillRect(0, 0, canvas.width, canvas.height);
                            

                            
            ctx.fillStyle = randColor();
                            
            ctx.font = fontSize + 'px Microsoft YaHei';
                            

                            
            for (var i = 0; i < drops.length; i++) {
                            
                var text = texts[Math.floor(Math.random() * texts.length)];
                            
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                            

                            
                if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
                            
                    drops[i] = 0;
                            
                }
                            

                            
                drops[i]++;
                            
            }
                            
        }
                            

                            
        function randColor() {
                            
            var r = Math.floor(Math.random() * 256);
                            
            var g = Math.floor(Math.random() * 256);
                            
            var b = Math.floor(Math.random() * 256);
                            
            return "rgb(" + r + "," + g + "," + b + ")";
                            
        }
                            

                            
        setInterval(draw, 50); 
                            
</script>
                            

                            
</body>
                            

                            
</html>

0 4

代码分析

这段HTML、CSS和JavaScript代码模拟了《黑客帝国》中“字母雨”的动态效果。下面是对代码各部分的详细分析：

HTML结构 ：

使用<canvas>元素作为动画绘制的画布，其高度和宽度都设置为浏览器窗口的100%，以填满整个屏幕。

CSS样式 ：

设置了HTML和body标签的margin和padding为0，并且将overflow属性设为hidden，确保页面无滚动条且内容能全屏显示。
通过CSS阻止用户在页面上选择文本（onselectstart="false"），模仿电影中无法选中或复制代码雨的效果。

JavaScript脚本 ：
- 获取canvas元素及其2D渲染上下文。
- 根据窗口大小调整canvas的高度和宽度，使动画适应不同尺寸的屏幕。
- 定义一个包含小写字母的数组texts，模拟下落的字符序列。
- 初始化drops数组，用于存储每个字符下落的位置信息。
  
  draw()函数 ：
- 清除画布背景并填充一个半透明黑色渐变，模仿电影中的绿色数字雨逐渐消失的效果。
- 随机选取颜色来绘制文字，每次循环都会改变字体颜色。
- 循环遍历drops数组，对于每一个下落位置，随机选择一个字符并将其绘制到相应的位置。
- 当字符到达底部或者有较小概率时，重置该字符的起始位置。
- 每个字符在其当前高度上增加一单位（模拟下落效果）。
  
  randColor()函数 ：
- 返回一个随机RGB颜色字符串，为每一帧的字符提供不同的颜色。
- 最后，使用setInterval(draw, 50)每50毫秒调用一次draw函数，创建连续动画效果，使得字符看起来像在持续下落。