本站背景-canvas代码雨源码分享

    /* CSS部分 */
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }

    canvas {
      background-color: #000;
    }

<!-- html部分 --> <canvas></canvas>

      const canvas = document.querySelector("canvas");

      const ctx = canvas.getContext("2d");

      const w = window.innerWidth,
        h = window.innerHeight,
        fontSize = 26;

      // 设置canvas大小
      canvas.width = w;
      canvas.height = h;

      //   设置canvas渲染的文字大小与字体
      ctx.font = `${fontSize}px "微软雅黑"`;

      // 编写随机获取颜色 和字符 函数 默认返回随机字符，传入true返回随机颜色
      function getRandomContent(type = false) {
        // 定义随机颜色数组
        const colorArr = [
          "#FFFFFF",
          "#FF3366",
          "#33CCFF",
          "#FFFF33",
          "#66FF66",
          "#CC66FF",
          "#FF9933",
          "#FF6666",
          "#33FFCC",
          "#9966FF",
          "#FFCC00",
          "#3366FF",
          "#66CC99",
          "#FF66CC",
          "#CCFFFF",
          "#FFCC99",
        ];

        // 定义完成字符
        const str = 'print("HelloWorld");';

        // 根据type值判断返回的数据
        const returnData = type ? colorArr : str;

        return returnData[Math.floor(Math.random() * returnData.length)];
      }

      //   计算每列可以存放多少个字符
      const rowStrNum = Math.floor(w / fontSize);

      //   定义数组 用于存储每列
      const dataArrCol = new Array(rowStrNum).fill(0);

      //   开始绘制文字
      function drawText() {
        // 每次绘制之前 先覆盖一层蒙版
        ctx.fillStyle = "rgba(0,0,0,.15)";
        ctx.fillRect(0, 0, w, h);
        dataArrCol.forEach((item, index) => {
          // 每次循环 获取一个新的颜色和字符
          const color = getRandomContent(true);
          const text = getRandomContent();

          // 计算文字所在的位置 x y
          const x = fontSize * index + 10,
            y = (fontSize + 6) * (item + 1);

          // 设置文字颜色
          ctx.fillStyle = color;

          ctx.fillText(text, x, y);

          // 判断边界  增加随机条件，让元素随机返回第一行 实现错落效果
          if (fontSize * item > h && Math.random() > 0.9) {
            dataArrCol[index] = 0;
          } else {
            // 每次循环结束前 让数组的item+1
            dataArrCol[index] = item + 1;
          }
        });
      }
      drawText();

      setInterval(drawText, 40);