装X代码

这个代码在很多黑客电影都见过，以前觉得他很帅，现在才发现现实中几乎不会出现这种场景。

下面我们将用一段代码来模拟这个场景。

下面的第一个代码完全公开许可，不保留任何权利

保存到一个后缀为HTML或HTM的文件中，双击即可食用。

原理剖析

首先要保证有良好的视觉体验，所以设置body元素的外边距为0，并且隐藏滚动条。为了使canvas占据整个视口，不会有空白区域或滚动条干扰。
所以我们可以用CSS这样规定它


         body {
         margin: 0;
         overflow: hidden;
         }

接着，我们需要把背景变成黑色的，我们可以通过创建一个画布来实现


       <canvas id="canvas" style="background:#000000;"></canvas>

然后处理事件，首先获取Canvas元素及其绘图上下文


        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

为了解决高度问题，我们可以设置画布的宽度和高度为窗口当前大小


         var w = window.innerWidth;
         var h = window.innerHeight;
         canvas.width = w;
         canvas.height = h;

现在要告诉系统字体和排列数，我们让他定义字体大小fontSize为14px，计算每行可以放多少个字符


         var fontSize = 14; 
         var clos = Math.floor(w / fontSize);

创建一个数组drops用来记录每一列下落的位置


         var drops = [];
         for (var i = 0; i < clos; i++) {
             drops.push(0);
         }

定义字符串str为一组小写字母，从“q”到“m”，用于随机生成下落的字符


         var str = "qwertyuiopasdfghjklzxcvbnm";

清空画布，设置fillStyle为半透明黑色，覆盖整个canvas，模拟背景的逐渐暗淡


         ctx.fillStyle = "rgba(0,0,0,0.05)";
         ctx.fillRect(0, 0, w, h);

设置字体样式和颜色


         ctx.font = "600 " + fontSize + "px 流星雨";
         ctx.fillStyle = "#00ff00";

循环遍历每一列，绘制字符并调整下落的位置


         for (var i = 0; i < clos; i++) {
           var x = i * fontSize;
           var y = drops[i] * fontSize;
    
           ctx.fillText(str[Math.floor(Math.random() * str.length)], x, y);
     
           if (y > h && Math.random() > 0.99) {
               drops[i] = 0;
           }
    
           drops[i]++;
         }

使用setInterval(drawString, 30);每30毫秒调用一次drawString函数，保持动画效果。

窗口大小调整处理


         window.onresize = function() {
           // 更新窗口大小、画布尺寸以及重置drops数组
           w = window.innerWidth;
           h = window.innerHeight;
           canvas.width = w;
           canvas.height = h;
           clos = Math.floor(w / fontSize);
    
           // 重置drops数组为全0，以适应新的列数
           drops = [];
           for (var i = 0; i < clos; i++) {
               drops.push(0);
           }
         };

OK，以上就是大致原理，快拿去玩吧