黑客帝國背景效果

<div id="page_end_html">
    <div><canvas id="matrixBG"></canvas></div>
</div>

<script>
    var width = matrixBG.width = window.screen.width;
    var height = matrixBG.height = window.screen.height;
    var yPositions = Array(300).join(0).split('');
    var ctx = matrixBG.getContext('2d');
    var fonts1 = "ㄅㄆㄇㄈㄪㄉㄊㄋㄌㄍㄎㄫㄏㄐㄑㄬㄒㄓㄔㄕㄖㄗㄘㄙㄚㄛㄜㄝㄞㄟ奇ㄠㄡㄢㄣㄤㄥㄦㄧㄨㄩ";
    var fonts2 = "釒彡圭卌廾爫蔡丷糹忄冖辶弋刂冫灬豕川";
    var fonts = fonts1 + fonts2;
    var draw = function () {
        ctx.fillStyle = 'rgba(0,0,0,.05)';
        ctx.fillRect(0, 0, width, height);
        ctx.fillStyle = '#0F0';
        ctx.font = '10pt Georgia';
        yPositions.map(function (y, index) {
            var rand = Math.floor(Math.random() * fonts.length);
            var text = fonts.substr(rand, 1);
            x = (index * 10) + 10;
            matrixBG.getContext('2d').fillText(text, x, y);
            if (y > 100 + Math.random() * 1e4) {
                yPositions[index] = 0;
            }
            else {
                yPositions[index] = y + 10;
            }
        });
    }

    RunMatrix();
    function RunMatrix() {
        if (typeof Game_Interval != "undefined") clearInterval(Game_Interval);
        Game_Interval = setInterval(draw, 33);
    }
    function StopMatrix() {
        clearInterval(Game_Interval);
    }
</script>

食用方法：

複製程式碼 新建文字 貼上 重命令 index.html，雙擊，即可! 效果如下：

程式碼參考：

黑客帝國背景樣式

本作品採用《CC 協議》，轉載必須註明作者和本文連結