js实现黑客帝国二进制雨

写在前面

关于代码和实际实现效果可以点击这里去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上就行修改实时查效果。

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