依辰

首页 » 网站源码 » 黑客数字雨源代码-彩色动态效果

黑客数字雨源代码-彩色动态效果

效果网站:点击访问


代码如下:

<!doctype html>
<html lang="en">
 <head>
 <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
  <meta charset="UTF-8">
  <meta name="Author" content="中华软件库">
<meta name="keywords" content="中华软件库,身份证号码防沉迷,优质资源网,软件库,防沉迷注册身份证">
<meta name="Description" content="">
  <title>黑客数字雨</title>
  <style> 
 *{margin:0;}
 canvas{background:#000000;}
 body{overflow:hidden;}
  </style>
 </head>
 <body>
 <!--画布-->
   <canvas width="0" height="0" id="canvas0"> 
   </canvas>
 <!--javascript -->
 <script>
  var canvas=document.getElementById("canvas0");
  //获取权限
  var ctx=canvas.getContext("2d");
  //获取屏幕信息
  var screenInformation= window.screen;
  //控制台输出屏幕信息
  console.log(screenInformation);
  //设置屏幕信息
  canvas.width=screenInformation.width;
  canvas.height=screenInformation.height;
  //字体大小
  var fontSize=20;
  //字体
  var str="01";
  var cols=Math.floor((screenInformation.width)/fontSize);
  var X =[];
  for(var i=0;i<cols;i++){
   X.push(0);
  }
  var gradient=ctx.createLinearGradient(0,0,screenInformation.width,screenInformation.height);
  gradient.addColorStop("0","#ff0099");
  gradient.addColorStop("0.25","#00ccff");
  gradient.addColorStop("0.5","#ffff00");
  gradient.addColorStop("0.75","#cc66cc");
  gradient.addColorStop("0.1","#00ccff");
  function matrix(){
   ctx.fillStyle="rgba(0,0,0,0.02)";
   //清除画布
   ctx.fillRect(0,0,canvas.width,canvas.height);
   //设置字体颜色
   ctx.fillStyle=gradient;
   for(var i=0;i<cols;i++){
    var y=X[i]*fontSize;
    ctx.fillText(str[Math.floor(Math.random()*str.length)],i*fontSize,y);
    if(y >= screenInformation.height&&Math.random()>0.99){
     X[i]=0;
    }
    X[i]++;
   }
  }
  setInterval(matrix,30);
 </script>
 </body>
</html>

文章如无特别注明均为原创! 作者: 中华软件库,依辰QQ:634800394 转载或复制请以 超链接形式 并注明出处 中华软件库-优质资源分享网
原文地址《 黑客数字雨源代码-彩色动态效果》 发布于2019-11-29

评论

游客

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册