js实现黑客帝国二进制雨
置顶文章:《纯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