一、废话少说，直接贴代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #canvas {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas"></canvas>
    <script>
      let canvas = document.querySelector('#canvas');
      let ctx = canvas.getContext('2d');
      canvas.height = screen.availHeight; //可视区域的高度
      canvas.width = screen.availWidth; //可视区域的宽度
      let str = 'QWERTYUIOPLKJHGFDSAZXCVBNM1234567890-=!@#$%^&*()_+|'.split('');
      let Arr = Array(Math.ceil(canvas.width / 10)).fill(0); //获取宽度例如1920 / 10 192
      const rain = () => {
        ctx.fillStyle = 'rgba(0,0,0,0.05)'; //填充背景颜色
        ctx.fillRect(0, 0, canvas.width, canvas.height); //背景
        ctx.fillStyle = '#0f0'; //文字颜色
        Arr.forEach((item, index) => {
          ctx.fillText(
            str[Math.floor(Math.random() * str.length)],
            index * 10,
            item + 10
          );
          Arr[index] =
            item >= canvas.height || item > 10000 * Math.random()
              ? 0
              : item + 10; //添加随机数让字符随机出现不至于那么平整
        });
      };
      setInterval(rain, 40);
    </script>
  </body>
</html>

二、效果如下

代码雨.gif

参考来源：bilibili up主小满zs

简单代码实现黑客帝国代码雨

一、废话少说，直接贴代码

二、效果如下