js实现黑客帝国文字下落效果

2023-08-04 21:32:16

突然想到这个效果便想实现以下。

当然免不了要百度一下,于是查找到 http://www.cnblogs.com/myvin/p/4775152.html这篇文章，效果可以查看博文中的给出的效果图。那么我们直接分析代码吧

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>The Matrix for Practice</title>

    <style type="text/css">

    *{margin: 0 auto;padding: 0 auto;}

    body{background: black;overflow: hidden;}

    h1{text-align: center;color: green;text-transform: uppercase;}

    </style>

</head>

<body>

    <h1>the matrix</h1>

    <canvas id="matrix"></canvas>

    <script type="text/javascript">

    var matrix=document.getElementById("matrix"); //标签

      var context=matrix.getContext("2d");    //设置为2d

    matrix.height=window.innerHeight; //高度和宽度

    matrix.width=window.innerWidth;

      var drop=[];

      var font_size=16;

      var columns=matrix.width/font_size; //计算所能承载最大的列数

      for(var i=0;i<columns;i++)

          drop[i]=1+Math.random()*10;

      function drawMatrix(){ //绘制

      //

    context.fillStyle="rgba(0, 0, 0, 0.1)";   //黑色背景，透明度为0.9

      context.fillRect(0,0,matrix.width,matrix.height);  //绘制黑色半透明层

    //绘制数据层

      context.fillStyle="green";

      //context.font=font_size+"px";

      for(var i=0;i<columns;i++){

          context.fillText(Math.floor(Math.random()*2),i*font_size,drop[i]*font_size);/*get 0 and 1 绘制到指定的（x，y） 点  */ 

          if(drop[i]*font_size>(matrix.height*1/3)&&Math.random()>0.95)/*reset*/

              drop[i]=0;

          drop[i]++;

      }

  }

 var  cet= setInterval(drawMatrix,40)

   setTimeout(function(){  clearInterval(cet); },3000);

</script>

</body>

</html>

哈哈哈，直接将作者代码搬过来了，好了废话不多说直奔主题。

我这里贴出的代码是改善过的

if(drop[i]*font_size>(matrix.height*1/3)&&Math.random()>0.95)/*reset*/

这段代码原作者用的是2/3 但是实际效果第一次出现时候，一个整版面感觉像隔断了意向，而且需要“移动”到2/3处后才会错乱开来，感觉不够“神奇”于是稍加改动，当然，这样做并没有什么卵用，只是让整齐的版面时间减少了。

　　drop[i]=1+Math.random()*10;

这句代码也是我改后的，原作者设置的是固的值。没有后边的Math.random()*10 这导致了开场要绘制所有的数据在同一行，还是那句话，看起来不够“神秘”，为了快速的进入“神秘”场景于是，略加改动。

下图是改动后的效果：

当然这整体看起来感觉还是很平淡呀。于是继续进行改造

码农公寓

相关文章