实现黑客帝国屏幕效果

来源：互联网发布：sql建一个销售表编辑：程序博客网时间：2024/05/16 11:34

<!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和1if(drop[i]*font_size>(matrix.height*2/3)&&Math.random()>0.85)//判断高度随机重绘{drop[i]=0;}drop[i]++;}}setInterval(drawMatrix,50);</script></body></html>

0 0