canvas{

display: block;

}

function $(id){

return document.getElementById(id);

}

//畫布 的大小設(shè)置

var mywindow=window.screen;

var canvas=$("canvas");

canvas.width=mywindow.width;

canvas.height=mywindow.height;

//要輸出的信息

var str="0123456789";

str=str.split("");

var fontSize=16;//輸出字體的大小

//每列顯示多少個(gè)信息

var cols=canvas.width/fontSize;

//數(shù)組，統(tǒng)計(jì)下落的位置

var drops=[];

for(var i=0;i

drops[i]=1;

}

var ctx=canvas.getContext("2d");

function draw(){

/**

*這的Hei客帝國(guó)：

* 獲取頁(yè)面的 大小 包括寬度和高度

* 用cols獲取能夠?qū)挾燃虞d列數(shù)

* drops加載每一列的位置

* drops[2]=10 2為第二排的 top為10

*/

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

ctx.fillRect(0,0,canvas.width,canvas.height);

ctx.fillStyle="green";

ctx.font=fontSize+"px arial";

for(var i=0;i

var text=str[ Math.floor( Math.random() * (str.length) ) ];

// console.info("x-"+i*fontSize);

// console.info("y-"+drops[i]*fontSize);

ctx.fillText(text,i*fontSize,drops[i]*fontSize);

if(drops[i]*fontSize > canvas.height || Math.random() > 0.95)

drops[i] = 0;//把位置恢復(fù)到最上面

//控制下落的位置

drops[i]++;

}

}

setInterval(draw,33);

總結(jié)

以上是生活随笔為你收集整理的黑客数字雨html单页,Hei客帝国数字雨.html的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。