码迷,mamicode.com
首页 > 其他好文 > 详细

黑客帝国、乱雨纷飞效果

时间:2019-01-05 12:05:56      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:tle   title   add   inter   hid   document   nts   int   输出   

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>



效果图如下:
技术分享图片

 

 

 

效果图如下:

黑客帝国、乱雨纷飞效果

标签:tle   title   add   inter   hid   document   nts   int   输出   

原文地址:https://www.cnblogs.com/yongguang1990/p/10223753.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!