利用JS打造黑客代码雨效果

第利用JS打造黑客代码雨效果目录演示技术栈源码画布js样式设置

演示

技术栈

js实战我们也写过很多了，其中每次几乎都用到画布，大家知道它的重要性了吧。今天依旧用到它了。不过我们讲过它的用法就不多说了。这次我们说一下window.onload

window.onload()方法用于在网页加载完毕后立刻执行的操作，即当HTML文档加载完毕后，立刻执行某个方法。

window.onload()通常用于元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。

只有一个要执行的函数语法：

window.onload=funcRef;

因为JavaScript中的函数方法需要在HTML文档渲染完成后才可以使用，如果没有渲染完成，此时的DOM树是不完整的，这样在调用一些JavaScript代码时就可能报出undefined错误。

所以对于一些函数功能要用window.onload

window.onload与jQueryready()区别

window.onload=function(){};//JavaScript

$(document).ready(function(){});//jQuery

源码

画布

canvasid="mom"/canvas

js样式设置

window.onload=function(){

//获取画布对象

varcanvas=document.getElementById("mom");

//获取画布的上下文

//getContext()方法返回一个用于在画布上绘图的环境。

varcontext=canvas.getContext("2d");

//获取浏览器屏幕的宽度和高度

varW=window.innerWidth;

varH=window.innerHeight;

//设置canvas的宽度和高度

canvas.width=W;

canvas.height=H;

//每个文字的字体大小

varfontSize=16;

//计算列

varcolunms=Math.floor(W/fontSize);

//记录每列文字的y轴坐标

vardrops=[];

//给每一个文字初始化一个起始点的位置

//计算每一个文字所谓坐标存储y轴的坐标

for(vari=0;icolunms;i++){

drops.push(0);

//运动的文字

varstr="JavaScriptfunction(){}";

//4:fillText(str,x,y);原理就是去更改y的坐标位置

//绘画的函数

functiondraw(){

context.fillStyle="rgba(0,0,0,0.05)";

//fillRect()方法绘制“已填色”的矩形。默认的填充颜色是黑色。

context.fillRect(0,0,W,H);

//给字体设置样式

context.font="700"+fontSize+"px微软雅黑";

//给字体添加颜色

context.fillStyle="#00cc33";//可以rgb,hsl,标准色，十六进制颜色

//写入画布中

for(vari=0;icolunms;i++){

varindex=Math.floor(Math.random()*str.length);//设置文字出发时间随机Math.floor(Math.random()*str.length)让数组里面的文字索引随机出现

varx=i*fontSize;

vary=drops[i]*fontSize;//也让y轴方向也向下掉一个文字的距离

context.fillText(str[index],x,y);

////如果要改变时间，肯定就是改变每次他的起点

if(y=canvas.heightMath.random()0.99){

drops[i]=0;

drops[i]++;//让数组里面的值每次加一，用于上面的y轴下掉

//随机颜色

functionrandColor(){

varr=Math.floor(Math.random()*256);

varg=Math.floor(Math.random()*256);

varb=Math.floor(Math.random()*256);

return"rgb("