代碼如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>黑客帝國數據瀑布</title>
<style>
body{
margin:0px;
}
#canvas{
display:block;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var maxHeight=0; //窗口高度
var maxWidth=0; //窗口寬度
var canvas=null; //定義畫布
var arrMess=new Array(256); //生成256列數據
/*定義邏輯方法*/
function $_id(id){
return document.getElementById(id);
}
function random(min,max){
return (Math.random() * (max - min + 1) | 0) + min;
}
/*立即執行函數初始化數據*/
(function(){
maxWidth=window.innerWidth;
maxHeight=window.innerHeight;
var canvasEle=$_id("canvas");
canvasEle.width=maxWidth;
canvasEle.height=maxHeight;
canvas=canvasEle.getContext('2d');
var i=arrMess.length;
while(i--){
arrMess[i]=random(-500,0);
}
})();
/*進行畫布繪畫*/
function draw(){
canvas.fillStyle="rgba(0,0,0,0.05)";
canvas.fillRect(0,0,maxWidth,maxHeight);
arrMess.forEach(function(value,index){
var x=index * 10;
var text=String.fromCharCode(random(97,122));
canvas.fillStyle=getColor();
canvas.fillText(text,x,value);
arrMess[index]=value>(758 + Math.random()*484) ? 0 : value+10;
});
}
/*定時器刷新*/
setInterval(draw,60);
/*獲取隨機顏色*/
function getColor(){
return "#"+(function(color){
return new Array(7 - color.length).join(0) + color;
})((Math.random() * 0x1000000 | 0).toString(16));
}
</script>
</body>
</html>效果圖如下：
