黑客帝國代碼雨實現

第一種方法：

<canvas id="matrix"></canvas>

 

JS:

$(document).ready(function () {
    var matrix = document.getElementById("matrix");
    var context = matrix.getContext("2d");
    matrix.height = window.innerHeight;
    matrix.width = window.innerWidth;
    var drop = [];
    var font_size = 26; //字體
    var columns = matrix.width / font_size;
    for (var i = 0; i < columns; i++) {
        drop[i] = 1;
    }

    function drawMatrix() {
        context.fillStyle = "rgba(0, 0, 0, 0.1)";
        context.fillRect(0, 0, matrix.width, matrix.height);

        context.fillStyle = "green";
        context.font = font_size + "px";
        for (var i = 0; i < columns; i++) {
            context.fillText(Math.floor(Math.random() * 2), i * font_size, drop[i] * font_size);/*get 0 and 1*/
            if (drop[i] * font_size > (matrix.height * 2 / 3) && Math.random() > 0.85)/*reset*/
                drop[i] = 0;
            drop[i]++;
        }
    }
    setInterval(drawMatrix, 50);    //按照指定間隔一直執行方法


});

 

效果：

 

第二種方法：
首先看下兩個案例：
一：

<canvas id="myCanvasMatrix" width="500" height="200" style="border:1px solid #c3c3c3;"></canvas>
            <button type="button" id="puse">puse</button>
            <button type="button" id="run">run</button>

$(document).ready(function () {
    $('#fullpage').fullpage({
    });

    /*
        var c2 = document.getElementById("myCanvasMatrix");
        var ctx2 = c2.getContext("2d");
        其中 'ctx2' 就等同於下面的 'ctx1'
    */
    var ctx1 = $("#myCanvasMatrix").get(0).getContext("2d");
    /*
        其中$("").get(0)表示獲取內部的DOM對象引用
        也就是：獲取到對象的dom對象后就可以使用對應的dom API
    */
    /*
        getContext() 方法返回一個用於在畫布上繪圖的環境。
        Canvas.getContext(contextID);
        其中contextID參數當前唯一的合法值為'2d'，也就是支持了二維繪圖
        未來可能會支持'3d'這個參數哦~
    */
    var Matrix = function () {
        /*
            var my_gradient=ctx1.createLinearGradient(0,0,0,170);
            my_gradient.addColorStop(0,"black");
            my_gradient.addColorStop(1,"white");
            ctx1.fillStyle=my_gradient; 
        */
        ctx1.fillStyle = 'rgba(0,0,0,.07)';
        /*
            fillStyle 屬性設置或返回用於填充繪畫的顏色、漸變或模式。
            rgba(R,G,B,A)
            其中'.05'代表阿爾法透明度
        */
        ctx1.fillRect(0, 0, 500, 500);
        /*
            fillRect() 方法使用 fillStyle 屬性所指定的顏色、漸變和模式來填充指定的矩形
        */
        ctx1.fillStyle = "#0f0";
        ctx1.fillText('zhengbin', Math.random() * (500), Math.random() * (500));
        ctx1.fillText('cnblogs', Math.random() * (500), Math.random() * (500));
        /*
            其原理就是不停的產生新的有透明度的背景和要顯示的內容，
            這樣新的背景不停的覆蓋舊的顯示內容
            新的內容就突顯了出來
        */
    };
    runFun();
    var id;
    function stopFun() {
        clearInterval(id);
    }
    function runFun() {
        id = setInterval(Matrix, 50);
        /* 
           setInterval() 定義和用法:
           setInterval() 方法可按照指定的周期（以毫秒計）來調用函數或計算表達式。
           setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
        */
    }
    $("button#puse").click(function () {
        stopFun();
    });
    $("button#run").click(function () {
        runFun();
    });
});

 

二、

<canvas id="myCanvas" width="500" height="200" style="border:1px solid #c3c3c3;"></canvas>

 

    var YPositions = Array(51).join(0).split('');
    /*
        join() 方法用於把數組中的所有元素放入一個字符串
        split() 方法用於把一個字符串分割成字符串數組
    */
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var draw = function () {
        ctx.fillStyle = 'rgba(0,0,0,.05)';
        ctx.fillRect(0, 0, 500, 500); ctx.fillStyle = "#0f0";
        YPositions.map(function (y, index) {
            /*
                map() 把每個元素通過函數傳遞到當前匹配集合中，生成包含返回值的新的 jQuery 對象
            */
            x = (index * 10);
            ctx.fillText(parseInt(Math.random() * 10), x, y);
            /*
                在(x,y)坐標位產生一個'a'字符
                index為Ypositions的下標
            */
            if (y > 500) {
                YPositions[index] = 0;
            } else {
                YPositions[index] = y + 10;
            }
            /*
                如果新產生的字符已經到了<canvas>的辯解
                那么就使產生下一個新字符的位置回歸到原點
             */
        });
    };
    setInterval(draw, 30);

 

結合一下上面兩個的原理，則可以實現需求效果。

<canvas id="q" width="500" height="500"></canvas>

<script>
        /*
            ① 用setInterval(draw, 33)設定刷新間隔

            ② 用String.fromCharCode(1e2+Math.random()*33)隨機生成字母

            ③ 用ctx.fillStyle=’rgba(0,0,0,.05)’; ctx.fillRect(0,0,width,height); ctx.fillStyle=’#0F0′; 反復生成opacity為0.5的半透明黑色背景

            ④ 用x = (index * 10)+10;和yPositions[index] = y + 10;順序確定顯示字母的位置

            ⑤ 用fillText(text, x, y); 在指定位置顯示一個字母 以上步驟循環進行，就會產生《黑客帝國》的片頭效果。
        */
        $(document).ready(function () {
            var s = window.screen;
            var width = q.width = s.width;
            var height = q.height;
            var yPositions = Array(300).join(0).split('');
            var ctx = q.getContext('2d');
            var draw = function () {
                ctx.fillStyle = 'rgba(0,0,0,.05)';
                ctx.fillRect(0, 0, width, height);
                ctx.fillStyle = 'red';
                ctx.font = '10pt Georgia';
                yPositions.map(function (y, index) {
                    //text = String.fromCharCode(1e2 + Math.random() * 33);　　//這是隨機字母
                    text = parseInt(Math.random() * 2);
                    x = (index * 10) + 10;
                    q.getContext('2d').fillText(text, x, y);
                    if (y > Math.random() * 1e4) {
                        yPositions[index] = 0;
                    } else {
                        yPositions[index] = y + 10;
                    }
                });
            };
            RunMatrix();
            function RunMatrix() {
                Game_Interval = setInterval(draw, 50);
            }
        });
    </script>