2018-12-10 黑客帝国js随笔
js黑客帝国效果页面实现-By罗温柔
1.先上效果图：
黑客帝国效果图
2.具体怎么实现请看代码：
<!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;
//将字符串转化为数组
var strs ="0123456789".split("");
//设置字体的大小
var fontSize=20;
//获取一行中的所有列数
var columns=canvas.width/fontSize;
var drops=[];
//将所有的列设置为第一行
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坐标,y坐标,画布的宽，画布的高）
ctx.fillStyle = "#00EE00";
ctx.font=fontSize+"px arial";
for(var i=0;i<columns;i++){
var text=strs[Math.floor(Math.random()*(strs.length))];//画布中的内容，显示0~9的数字
ctx.fillText(text,i*fontSize,drops[i]*fontSize);//（内容，x坐标,y坐标)
if(drops[i]*fontSize>canvas.height || Math.random()>0.95){
//当y下落的高度大于画布的高度或随机数大于0.95时，下落高度为0
drops[i]=0; }
drops[i]++;
}
};
setInterval(draw,33);
</script>
</body>
</html>
