七窍通了六窍

使用 Canvas 绘制黑客帝国数字效果

Posted on Edited on In Valine:

今天在访问 https://api.pkupi.com/ 时，发现页面效果很是酷炫，查看 whois 显示域名将于 3 天后到期，就先把源码备份下来，万一以后装逼用得着呢

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, viewport-fit=cover">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon.jpg">
    <title>Danger!</title>
    <style>
    html, body {
        font-family: courier, monospace;
    }
    span {
        animation: flash 1s infinite;
    }
    </style>
    </head>
    <body>
        <script>
        /*
        * _(:з」∠)_
        * Created by Shuqiao Zhang in 2018.
        * https://zhangshuqiao.org
        */
        
        /*
        * This program is free software: you can redistribute it and/or modify
        *  it under the terms of the GNU General Public License as published by
        *  the Free Software Foundation, either version 3 of the License, or
        *  (at your option) any later version.
        *
        * This program is distributed in the hope that it will be useful,
        *  but WITHOUT ANY WARRANTY; without even the implied warranty of
        *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
        *  GNU General Public License for more details.
        */
        
        var canvas = document.createElement("canvas"),
            context = canvas.getContext("2d");
        document.body.appendChild(canvas);
        canvas.style.cssText = "position: fixed; top: 0; left: 0; background-color: #111; z-index: -100;";
        var W = window.innerWidth,
            H = window.innerHeight;
        canvas.width = W;
        canvas.height = H;
        var colunms = 49,
            fontSize = Math.floor(W / colunms),
            string = "1234567890",
            number = [],
            jmax = 2;
        
        setInterval(function() {
            context.fillStyle = "rgba(0,0,0,0.4)";
            context.fillRect(0, 0, W, H);
            context.font = "700 " + fontSize + "px monospace";
            context.fillStyle = "#00cc33";
            for (var i = 0; i < colunms; i++) {
                if (i % 10 == 9) continue;
                for (var j = 1; j < jmax; j++) {
                    var index = Math.floor(Math.random() * string.length);
                    var x = (i + 0.5) * fontSize;
                    var y = j * fontSize;
                    if (!number[[x, y]] || Math.random() < 0.1) number[[x, y]] = string[index];
                    context.fillText(number[[x, y]], x, y);
                }
            }
            if (jmax < Math.ceil(H / fontSize)) jmax++;
        }, 80);
        </script>
        <canvas width="1" height="821" style="position: fixed; top: 0px; left: 0px; background-color: rgb(17, 17, 17); z-index: -100;"></canvas>
    </body>
</html>

运行结果如下：

由于 jsfiddle 在大陆有时不可访问，可能无法加载结果，请直接保存运行以上代码查看效果。

因为热爱，所以执着。