<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Maxtrix</title>
<style>
*{
margin: 0 auto;
padding: 0 auto;
}
body{
background: black;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="matrix"></canvas>
<script>
//初始化画布
var matrix = document.getElementById("matrix");
var context = matrix.getContext("2d");
//设置画布宽高
matrix.height = window.innerHeight;
matrix.width = window.innerWidth;
//设置字体,获取列数，y坐标
var drop =[];
var font_size = 16;
var columns = matrix.width/font_size;
for(var i=0;i<columns;i++){
drop[i]=1;
}
//绘制Matrix函数
function drawMatrix(){
context.fillStyle="rgba(0,0,0,0.1)";
context.fillRect(0,0,matrix.width,matrix.height);
context.fillStyle="green";
context.font = font_size+"px";
for(var i=0;i<columns;i++){
context.fillText(Math.floor(Math.random()*2),i*font_size,drop[i]*font_size);//产生0和1
if(drop[i]*font_size>(matrix.height*2/3)&&Math.random()>0.85)//判断高度随机重绘
{ drop[i]=0;}
drop[i]++;
}
}
setInterval(drawMatrix,50);
</script>
</body>
</html>
转载请注明原文地址: https://ju.6miu.com/read-669197.html
