js實現黑客帝國二進制雨

---

置頂文章：《純CSS打造銀色MacBook Air（完整版）》

上一篇：《對於RegExp反向引用的一點理解》

做者主頁：myvin
博主QQ：851399101（點擊QQ和博主發起臨時會話）

---

致謝

感謝Antineutrino和Cyclone77的意見，點擊兩位博主id可查看其主頁。

由於以前是判斷落出視口高度而且大於一個隨機數纔再次繪製，中間會有一斷間隔，因此會有一斷一斷的感受，已經將高度判斷修改成2/3，這樣會好一些，已在文中同步修改，且下文會有對應說明。

再次感謝Antineutrino和Cyclone77，點擊兩位博主id可查看其主頁。

寫在前面

關於代碼和實際實現效果能夠點擊這裏去CodePen上查看。

黑客帝國有一個經典畫面：電影開頭下綠色數字雨（是數字仍是文字，記不清了。。。），這裏咱們用js來實現，下二進制雨（下什麼均可以，只是二進制顯得有科技感）。

網上有下文字雨的實現，思路基本上是同樣，如感興趣，請自行搜索。

正文

先上效果圖：

關於代碼和實際效果請這裏去CodePen上查看。

在這裏，咱們主要用到的是H5裏面的canvas畫布標籤，canvas只是定義了一個畫布，並無繪製功能，要實現繪製得用js。關於canvas的相關知識請自行搜索，在此再也不贅述。

好的，進入正文。

首先是簡單reset一下樣式：

*{margin: 0 auto;padding: 0 auto;}
body{background: black;overflow: hidden;}

爲了實現一個全屏沒有滾動條的效果，這裏對於溢出的hidden。

而後定義了一個id爲martrix的畫布：

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

接着在畫布上進行繪製。

接下來是canvas的一些基本操做，得到上下文環境：

var matrix=document.getElementById("matrix");
var context=matrix.getContext("2d");

由於是實現視口的全屏效果，因此先得到視口，並設置成畫布大小：

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

接下來咱們設置字體大小變量，並根據字體大小來得到二進制雨的列數，同時定義一個數組，用來動態改變y座標，以下：

var drop=[];
var font_size=16;
var columns=matrix.width/font_size;
for(var i=0;i<columns;i++)
drop[i]=1;

而後咱們開始寫繪製函數drawMatrix：

先給出drawMartrix函數：

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&&Math.random()>0.85)/*reset*///此處有問題，已修改，說明見下方紅字
    if(drop[i]*font_size>(matrix.height*2/3)&&Math.random()>0.85)/*reset*/   
drop[i]=0;
drop[i]++;
    }
}

由於判斷落出視口高度而且大於一個隨機數纔再次繪製，中間會有一斷間隔，因此會有一斷一斷的感受，已經將高度判斷修改成2/3，這樣會好一些。修改的程序以下，並已經在文章同步修改：

if(drop[i]*font_size>(matrix.height*2/3)&&Math.random()>0.85)/*reset*/

簡單說一下上面的繪製函數：

首先繪製了一個視口大小的矩形，並用rgba(0, 0, 0, 0.1)來填充，請注意這裏的不一樣明度，這裏的不透明度將會影響下落的效果。由於是一遍一遍繪製，若是將將其設置爲徹底不透明或者不透明度比較高，那麼當繪製完一遍，再繪製第二遍的時候，上一次繪製出來的數字就會被徹底遮蓋，這樣數字透明漸變的效果就會不好。

修改不透明度參數的實時效果，能夠點擊這裏去CodePen上就行修改實時查看效果。

接下來咱們設置下落的數字。數字文本是用fillText來繪製的。首先，咱們將數字文本顏色設置爲green，而後設置數字文本字體大小，在這裏加上單位px，context.font=font_size+"px"。接下來就是一個循環了。

這個循環思路是這樣的：

用循環來控制顯示位置，並在顯示位置上繪製數字文本，數組爲random的0或1的隨機值，而後進行if判斷，若是超出屏幕高度，則從新從頭繪製。

在context.fillText(Math.floor(Math.random()*2),i*font_size,drop[i]*font_size)中，後兩個參數是xy座標位置，很好理解，if(drop[i]*font_size>matrix.height&&Math.random()>0.85)/*reset*/
中，若是沒有Math.random()>0.85的限制，則效果是循環每列數字同時從視口上面出現，同時從視口的2/3處消失，沒有隨機的效果，因此加一個random來限制，效果以下：

修改random參數的實時效果，能夠點擊這裏去CodePen上就行修改實時查效果。

最後一步就是把繪製函數循環調用：

setInterval(drawMatrix,50);

循環的時間間隔自行設置，修改循環時間間隔參數能夠點擊這裏去CodePen上就行修改實時查效果。

最後，祝你們都過好每一天~~

---

轉載請記得說明做者和出處哦-.-
做者：myvin
原文出處：http://www.cnblogs.com/myvin/p/4775152.html

---

下一篇：《Canvas模擬粒子系統》

置頂文章：《純CSS打造銀色MacBook Air（完整版）》