黑客帝国 demo

最新推荐文章于 2023-09-27 19:00:00 发布

涛痕

最新推荐文章于 2023-09-27 19:00:00 发布

阅读量924

点赞数 1

分类专栏： demo 涛痕世界文章标签：黑客帝国实例 JavaScript css html

本文链接：https://blog.youkuaiyun.com/iamcgt/article/details/72983790

版权

涛痕世界同时被 2 个专栏收录

56 篇文章

订阅专栏

demo

18 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的黑客帝国风格的绿色字符滚动效果。通过创建一个canvas元素并利用JavaScript进行动态绘制，可以模拟电影《黑客帝国》中经典的字符雨效果。该效果包括动态生成的字符和模拟的下落动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

这里写图片描述

思路

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>黑客帝国</title>
    <style type="text/css">
        * {
            margin: 0 auto;
            padding: 0 auto;
        }

        body {
            background: black;
            overflow: hidden;
        }

        h1 {
            text-align: center;
            color: green;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
<h1>the matrix</h1>
<canvas id="matrix"></canvas>
<script type="text/javascript">
    var matrix = document.getElementById("matrix");
    var context = matrix.getContext("2d");
    matrix.height = window.innerHeight;
    matrix.width = window.innerWidth;
    var drop = [];  //用于最后计算掉落的y坐标
    var font_size = 20;     //字体大小
    var columns = matrix.width / font_size; //列数
    for (var i = 0; i < columns; i++)
        drop[i] = 1;

    function drawMatrix() {
        //1、画一个和页面一样大的几乎透明的黑色的布
        context.fillStyle = "rgba(0, 0, 0, 0.1)";
        context.fillRect(0, 0, matrix.width, matrix.height);

        //2、context改为绿色用于画数字
        context.fillStyle = "green";
        context.font = font_size + "px";

        for (var i = 0; i < columns; i++) {
            //3、随机画0和1，并且通过drop[i]值改变其y坐标
            context.fillText(Math.floor(Math.random() * 2), i * font_size, drop[i] * font_size);

            //4、当y坐标值大于2/3高度并且random数字大于0.85时，改变drop[i]值，再下一次画的时候y坐标就不同了
            if (drop[i] * font_size > (matrix.height * 2 / 3) && Math.random() > 0.85)
                drop[i] = 0;
            drop[i]++;
        }
    }
    //5、重复画图，由于布是几乎透明的，所以会慢慢覆盖之前的数字，形成流星划过的感觉
    setInterval(drawMatrix, 50);
</script>
</body>
</html>