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

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

作者主頁：myvin
博主QQ：851399101（點擊QQ和博主發(fā)起臨時會話）

致謝

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

因為之前是判斷落出視口高度并且大于一個隨機數(shù)才再次繪制，中間會有一斷間隔，所以會有一斷一斷的感覺，已經(jīng)將高度判斷修改為2/3，這樣會好一些，已在文中同步修改，且下文會有對應(yīng)說明。

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

寫在前面

關(guān)于代碼和實際實現(xiàn)效果可以點擊這里去CodePen上查看。

黑客帝國有一個經(jīng)典畫面：電影開頭下綠色數(shù)字雨（是數(shù)字還是文字，記不清了。。。），這里我們用js來實現(xiàn)，下二進制雨（下什么都可以，只是二進制顯得有科技感）。

網(wǎng)上有下文字雨的實現(xiàn)，思路基本上是一樣，如感興趣，請自行搜索。

正文

先上效果圖：

關(guān)于代碼和實際效果請這里去CodePen上查看。

在這里，我們主要用到的是H5里面的canvas畫布標簽，canvas只是定義了一個畫布，并沒有繪制功能，要實現(xiàn)繪制得用js。關(guān)于canvas的相關(guān)知識請自行搜索，在此不再贅述。

好的，進入正文。

首先是簡單reset一下樣式：

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

為了實現(xiàn)一個全屏沒有滾動條的效果，這里對于溢出的hidden。

然后定義了一個id為martrix的畫布：

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

接著在畫布上進行繪制。

接下來是canvas的一些基本操作，獲得上下文環(huán)境：

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

因為是實現(xiàn)視口的全屏效果，所以先獲得視口，并設(shè)置成畫布大?。?/p>

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

接下來我們設(shè)置字體大小變量，并根據(jù)字體大小來獲得二進制雨的列數(shù)，同時定義一個數(shù)組，用來動態(tài)改變y坐標，如下：

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

然后我們開始寫繪制函數(shù)drawMatrix：

先給出drawMartrix函數(shù)：

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]++;
	}
}

因為判斷落出視口高度并且大于一個隨機數(shù)才再次繪制，中間會有一斷間隔，所以會有一斷一斷的感覺，已經(jīng)將高度判斷修改為2/3，這樣會好一些。修改的程序如下，并已經(jīng)在文章同步修改：

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

簡單說一下上面的繪制函數(shù)：

首先繪制了一個視口大小的矩形，并用rgba(0, 0, 0, 0.1)來填充，請注意這里的不同明度，這里的不透明度將會影響下落的效果。因為是一遍一遍繪制，如果將將其設(shè)置為完全不透明或者不透明度比較高，那么當(dāng)繪制完一遍，再繪制第二遍的時候，上一次繪制出來的數(shù)字就會被完全遮蓋，這樣數(shù)字透明漸變的效果就會很差。

修改不透明度參數(shù)的實時效果，可以點擊這里去CodePen上就行修改實時查看效果。

接下來我們設(shè)置下落的數(shù)字。數(shù)字文本是用fillText來繪制的。首先，我們將數(shù)字文本顏色設(shè)置為green，然后設(shè)置數(shù)字文本字體大小，在這里加上單位px，context.font=font_size+"px"。接下來就是一個循環(huán)了。

這個循環(huán)思路是這樣的：

用循環(huán)來控制顯示位置，并在顯示位置上繪制數(shù)字文本，數(shù)組為random的0或1的隨機值，然后進行if判斷，如果超出屏幕高度，則重新從頭繪制。

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

修改random參數(shù)的實時效果，可以點擊這里去CodePen上就行修改實時查效果。

最后一步就是把繪制函數(shù)循環(huán)調(diào)用：

setInterval(drawMatrix,50);

循環(huán)的時間間隔自行設(shè)置，修改循環(huán)時間間隔參數(shù)可以點擊這里去CodePen上就行修改實時查效果。

最后，祝大家都過好每一天~~

轉(zhuǎn)載請記得說明作者和出處哦-.-
作者：myvin
原文出處：http://www.cnblogs.com/myvin/p/4775152.html

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

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