js实现黑客帝国二进制雨


置顶文章:《纯CSS打造银色MacBook Air(完整版)》

上一篇:《对于RegExp反向引用的一点理解》

作者主页:myvin
博主QQ:851399101(点击QQ和博主发起临时会话)


致谢

感谢AntineutrinoCyclone77的意见,点击两位博主id可查看其主页。

因为之前是判断落出视口高度并且大于一个随机数才再次绘制,中间会有一断间隔,所以会有一断一断的感觉,已经将高度判断修改为2/3,这样会好一些,已在文中同步修改,且下文会有对应说明。

再次感谢AntineutrinoCyclone77,点击两位博主id可查看其主页。

写在前面

关于代码和实际实现效果可以点击这里CodePen上查看。

黑客帝国有一个经典画面:电影开头下绿色数字雨(是数字还是文字,记不清了。。。),这里我们用js来实现,下二进制雨(下什么都可以,只是二进制显得有科技感)。

网上有下文字雨的实现,思路基本上是一样,如感兴趣,请自行搜索。

正文

先上效果图:

Martrix

关于代码和实际效果请这里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限制效果

修改random参数的实时效果,可以点击这里CodePen上就行修改实时查效果。

最后一步就是把绘制函数循环调用:

setInterval(drawMatrix,50);

循环的时间间隔自行设置,修改循环时间间隔参数可以点击这里CodePen上就行修改实时查效果。

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



转载请记得说明作者和出处哦-.-
作者:myvin
原文出处:http://www.cnblogs.com/myvin/p/4775152.html


下一篇:《Canvas模拟粒子系统》

置顶文章:《纯CSS打造银色MacBook Air(完整版)》

*****************************************
posted @ 2015-09-01 10:56  myvin  阅读(9631)  评论(26编辑  收藏  举报