黑客帝國、亂雨紛飛效果


1、linux下實現:
執行如下兩條命令即可
sudo apt-get install cmatrix 
cmatrix 

效果圖如下:

 

 


2、JS實現,吧如下代碼保存成HTML執行,即可 <!DOCTYPE html>
<
html>
<
head>
<title>黑客帝國效果</title>
</
head>
<
body>
<canvas id="canvas"></canvas>
<style type="text/css">body{margin: 0; padding: 0; overflow: hidden;}</style>
<
script type="text/javascript">
     
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
     canvas.height = window.innerHeight;
     canvas.width = window.innerWidth;
     var texts = '0123456789'.split('');
     var fontSize = 16;
     var columns = canvas.width/fontSize;
    // 用於計算輸出文字時坐標,所以長度即為列數
    var drops = []; //初始值
    for(var x = 0; x < columns; x++){
drops[x] = 1;
    }

    function draw(){
   //讓背景逐漸由透明到不透明
      ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
//文字顏色
     ctx.fillStyle = '#0F0';
   ctx.font = fontSize + 'px arial';
   //逐行輸出文字
     for(var i = 0; i < drops.length; i++){
var text = texts[Math.floor(Math.random()*texts.length)];
ctx.fillText(text, i*fontSize, drops[i]*fontSize);
if(drops[i]*fontSize > canvas.height || Math.random() > 0.95){
drops[i] = 0;
          }
      drops[i]++;
    }
    }
  setInterval(draw, 33);
</script>

</
body>



效果圖如下:

 

 

 

效果圖如下:

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com