HTML5 Canvas实现全屏黑客帝国文字掉落效果

原创 2016-08-15 09:51  阅读 700 次 评论 2 条

代码来自网络,我把它完善了一下。实现的原理比较简单,这里直接贴上代码,相信各位一看就能看懂

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6. <meta name="viewport" content="width=device-width, initial-scale=1">  
  7. <meta name="apple-mobile-web-app-capable" content="yes">  
  8. <meta name="apple-touch-fullscreen" content="yes">  
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  10. <meta name="full-screen" content="yes">   
  11. <meta name="x5-fullscreen" content="true">   
  12. <meta name="browsermode" content="application">   
  13. <meta name="x5-page-mode" content="app">   
  14. <style type="text/css">*{margin:0;overflow:hidden;}canvas{display:block;cursor:none;}</style>  
  15. <title>你电脑被黑了(点击或按F11全屏)</title>  
  16. <script type="text/javascript">  
  17.         window.onload=function(){  
  18.             var c = document.getElementById("c");  
  19.             var ctx = c.getContext("2d");  
  20.               
  21.             //使画布全屏  
  22.             c.height = window.innerHeight;  
  23.             c.width = window.innerWidth;  
  24.               
  25.             //要掉落的文字  
  26.             var txts = "0123456789";  
  27.             //转换为数组  
  28.             txts = txts.split("");  
  29.               
  30.             var font_size = 16;  
  31.             var columns = c.width/font_size; //计算纵队数  
  32.               
  33.             var drops = [];  
  34.             //初始值  
  35.             for(var x = 0; x < columns; x++)  
  36.                 drops[x] = 1;   
  37.               
  38.             //窗体大小发生改变  
  39.             window.onresize = function(){  
  40.                 //使绘图区域全屏  
  41.                 c.height = window.innerHeight;  
  42.                 c.width = window.innerWidth;  
  43.                 columns = c.width/font_size; //计算纵队数  
  44.                 for(var x = 0; x < columns; x++)  
  45.                     drops[x] = 1;  
  46.             }  
  47.               
  48.             //进入全屏  
  49.             function requestFullScreen() {  
  50.                 var de = document.documentElement;  
  51.                 if (de.requestFullscreen) {  
  52.                     de.requestFullscreen();  
  53.                 } else if (de.mozRequestFullScreen) {  
  54.                     de.mozRequestFullScreen();  
  55.                 } else if (de.webkitRequestFullScreen) {  
  56.                     de.webkitRequestFullScreen();  
  57.                 }  
  58.             }  
  59.               
  60.             //添加点击监听事件(点击全屏)  
  61.             document.body.addEventListener('click',function(){  
  62.                 requestFullScreen(); //调用全屏  
  63.             },false);  
  64.               
  65.             //绘制下落的文字  
  66.             function draw()  
  67.             {  
  68.                 //让背景逐渐由透明到不透明  
  69.                 ctx.fillStyle = "rgba(0, 0, 0, 0.05)";  
  70.                 ctx.fillRect(0, 0, c.width, c.height);  
  71.                   
  72.                 ctx.fillStyle = "#0F0"; //文本颜色(绿色)  
  73.                 ctx.font = font_size + "px arial";  
  74.                 //逐行输出文字  
  75.                 for(var i = 0; i < drops.length; i++)  
  76.                 {  
  77.                     //随机取要输出的文字  
  78.                     var text = txts[Math.floor(Math.random()*txts.length)];  
  79.                     //输出文字,注意坐标的计算  
  80.                     ctx.fillText(text, i*font_size, drops[i]*font_size);  
  81.                       
  82.                     //如果绘满一屏或随机数大于0.95(此数可自行调整,效果会不同)  
  83.                     if(drops[i]*font_size > c.height || Math.random() > 0.95)  
  84.                         drops[i] = 0;  
  85.                       
  86.                     //用于Y轴坐标增加  
  87.                     drops[i]++;  
  88.                 }  
  89.             }  
  90.               
  91.             setInterval(draw, 33);//定时执行  
  92.         }  
  93.     </script>  
  94. </head>  
  95. <body>  
  96. <canvas id="c">很抱歉,您的浏览器不支持该功能!</canvas>  
  97. </body>  
  98. </html>  

最后,点击这里可以查看运行效果演示

版权声明: 本文为孟坤博客原创文章,欢迎转载。转载请务必注明出处! (参考格式:本文转自孟坤博客,原文地址:https://mkblog.cn/131/

发表评论


表情

  1. 溪
    Lv 1 回复 沙发 2016-12-27 15:57

    好像不能用

    • mengkun
      mengkun 站长 回复 2016-12-27 16:36

      @溪感谢反馈!经过测试发现是编辑文章时代码出了点问题。已对代码进行了修正 [握手]