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

上一篇：《對(duì)于RegExp反向引用的一點(diǎn)理解》

作者主頁：myvin
博主QQ：851399101（點(diǎn)擊QQ和博主發(fā)起臨時(shí)會(huì)話）

致謝

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

因?yàn)橹笆桥袛嗦涑鲆暱诟叨炔⑶掖笥谝粋€(gè)隨機(jī)數(shù)才再次繪制，中間會(huì)有一斷間隔，所以會(huì)有一斷一斷的感覺，已經(jīng)將高度判斷修改為2/3，這樣會(huì)好一些，已在文中同步修改，且下文會(huì)有對(duì)應(yīng)說明。

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

寫在前面

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

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

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

正文

先上效果圖：

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

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

好的，進(jìn)入正文。

首先是簡單reset一下樣式：

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

為了實(shí)現(xiàn)一個(gè)全屏沒有滾動(dòng)條的效果，這里對(duì)于溢出的hidden。

然后定義了一個(gè)id為martrix的畫布：

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

接著在畫布上進(jìn)行繪制。

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

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

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

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

接下來我們?cè)O(shè)置字體大小變量，并根據(jù)字體大小來獲得二進(jìn)制雨的列數(shù)，同時(shí)定義一個(gè)數(shù)組，用來動(dòng)態(tài)改變y坐標(biāo)，如下：

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

因?yàn)榕袛嗦涑鲆暱诟叨炔⑶掖笥谝粋€(gè)隨機(jī)數(shù)才再次繪制，中間會(huì)有一斷間隔，所以會(huì)有一斷一斷的感覺，已經(jīng)將高度判斷修改為2/3，這樣會(huì)好一些。修改的程序如下，并已經(jīng)在文章同步修改：

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

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

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

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

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

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

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

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

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

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

setInterval(drawMatrix,50);

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

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

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

上一篇：《對(duì)于RegExp反向引用的一點(diǎn)理解》

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