實現黑客帝國螢幕效果
阿新 • • 發佈：2019-01-30
<!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>