关灯
收起左侧

HTML仿黑客代码雨

0
回复
931
查看
[复制链接]

 成长值: 11003

个人资料

职务: 董事会

铜板: 1450 个

金币: 1001 个

荣耀勋章

超级版主开国元勋夜猫子勋章春节勋章论坛一周年最佳新人活跃会员志愿者推广达人宣传达人灌水之王突出贡献版主荣誉管理论坛元勋

发表于 2019-9-7 12:52:19 | 显示全部楼层 |阅读模式

 
演示截图:
16640402667773.jpg 以下是代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Wecome to 天马</title>
  6.   <style type="text/css">
  7.   body,p{margin: 0;}
  8.    canvas{
  9.     display: block;
  10.     }
  11.   </style>
  12. </head>
  13. <body style="overflow-x:hidden;overflow-y:hidden">
  14.   <canvas id="canvas"></canvas>
  15.   <script>
  16.     function $(id){
  17.       return document.getElementById(id);
  18.     }
  19.    //画布 的大小设置
  20.    var mywindow=window.screen;
  21.    var canvas=$("canvas");
  22.    canvas.width=document.body.clientWidth;
  23.    canvas.height=document.body.clientWidth;

  24.    //要输出的信息
  25.    var str="0123456789";
  26.    str=str.split("");
  27.    var fontSize=20;//输出字体的大小

  28.    //每列显示多少个信息
  29.    var cols=canvas.width/fontSize;
  30.    //数组,统计下落的位置
  31.    var drops=[];
  32.    for(var i=0;i<cols;i++){
  33.      drops[i]=1;
  34.    }

  35.    var ctx=canvas.getContext("2d");
  36.    function draw(){
  37.     /**
  38.       *这的黑客帝国:
  39.       * 获取页面的 大小 包括宽度和高度
  40.       * 用cols获取能够宽度加载列数
  41.       * drops加载每一列的位置
  42.       * drops[2]=10 2为第二排的 top为10
  43.       */
  44.     ctx.fillStyle="rgba(0,0,0,0.05)";
  45.     ctx.fillRect(0,0,canvas.width,canvas.height);

  46.     ctx.fillStyle="green";
  47.     ctx.font=fontSize+"px arial";
  48.     for(var i=0;i<cols;i++){
  49.       var text=str[ Math.floor( Math.random() * (str.length) ) ];
  50.       // console.info("x-"+i*fontSize);
  51.       // console.info("y-"+drops[i]*fontSize);
  52.       ctx.fillText(text,i*fontSize,drops[i]*fontSize);
  53.       if(drops[i]*fontSize > canvas.height || Math.random() > 0.95)
  54.           drops[i] = 0;//把位置恢复到最上面
  55.       //控制下落的位置
  56.       drops[i]++;
  57.     }
  58.   }
  59.   setInterval(draw,33);
  60. </script>
  61. </body>
  62. </html>
复制代码

回复

使用道具 举报

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

官方微信

APP下载

24小时客服QQ

3300-1700-74
Copyright ©  2018-2020   天马论坛 (吉ICP备19000744号