js黑客帝國效果頁面實現(xiàn)-By羅溫柔
1.先上效果圖：
2.具體怎么實現(xiàn)請看代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>羅溫柔的黑客帝國</title>
<style type="text/css">
canvas { display: block;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
function $(id) {? return document.getElementById(id);? }?
var canvas = $("canvas");
var ctx =canvas.getContext("2d");
//window對象獲取屏幕的寬度和高度，把寬和高給畫布
var mywindow = window.screen;
canvas.width=mywindow.width;
canvas.height=mywindow.height;
//將字符串轉(zhuǎn)化為數(shù)組
var strs ="0123456789".split("");
//設(shè)置字體的大小
var fontSize=20;
//獲取一行中的所有列數(shù)
var columns=canvas.width/fontSize;
var drops=[];
//將所有的列設(shè)置為第一行
for(var i=0;i<columns;i++){? ? drops[i]=1;? ? }
function draw(){?
ctx.fillStyle="rgba(0,0,0,0.05)";
ctx.fillRect(0,0,canvas.width,canvas.height);//（x坐標(biāo),y坐標(biāo),畫布的寬，畫布的高）
ctx.fillStyle = "#00EE00";
ctx.font=fontSize+"px arial";
for(var i=0;i<columns;i++){
var text=strs[Math.floor(Math.random()*(strs.length))];//畫布中的內(nèi)容，顯示0~9的數(shù)字
ctx.fillText(text,i*fontSize,drops[i]*fontSize);//（內(nèi)容，x坐標(biāo),y坐標(biāo))
if(drops[i]*fontSize>canvas.height || Math.random()>0.95){
? ? //當(dāng)y下落的高度大于畫布的高度或隨機(jī)數(shù)大于0.95時，下落高度為0
? ? drops[i]=0;? }
drops[i]++;
}
};
setInterval(draw,33);
</script>
</body>
</html>
