置頂文章：《純CSS打造銀色MacBook Air（完整版）》
上一篇：《對於RegExp反向引用的一點理解》
作者主頁：myvin
博主QQ：851399101（點擊QQ和博主發起臨時會話）
致謝
感謝Antineutrino和Cyclone77的意見，點擊兩位博主id可查看其主頁。
因為之前是判斷落出視口高度並且大於一個隨機數才再次繪制，中間會有一斷間隔，所以會有一斷一斷的感覺，已經將高度判斷修改為2/3，這樣會好一些，已在文中同步修改，且下文會有對應說明。
再次感謝Antineutrino和Cyclone77，點擊兩位博主id可查看其主頁。
寫在前面
黑客帝國有一個經典畫面：電影開頭下綠色數字雨（是數字還是文字，記不清了。。。），這里我們用js來實現，下二進制雨（下什么都可以，只是二進制顯得有科技感）。
網上有下文字雨的實現，思路基本上是一樣，如感興趣，請自行搜索。
正文
先上效果圖：
在這里，我們主要用到的是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