类似黑客帝国的代码雨

ameegle

已于 2024-09-03 17:21:16 修改

阅读量73

点赞数 4

分类专栏： code me 文章标签： html5 css javascript

于 2024-08-29 18:23:58 首次发布

本文链接：https://blog.csdn.net/qq_39543994/article/details/141685452

版权

code me 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>code rain</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background: black;
      }

      canvas {
        display: block;
      }
    </style>
  </head>

  <body>
    <script>
      const canvas = document.createElement("canvas");
      canvas.setAttribute("width", window.innerWidth);
      canvas.setAttribute("height", window.innerHeight);
      document.body.append(canvas);

      const tmp = "abcdefghijklmnopqrstuvwxyz";
      const fontsize = 16;
      const columns = Math.ceil(canvas.width / fontsize);
      const drop = Array.from({ length: columns }).fill(0);
      const ctx = canvas.getContext("2d");
      function drap() {
        ctx.fillStyle = "rgba(0,0,0,0.07)";
        // a,b,c,d分别代表x方向偏移,y方向偏移,宽，高
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "#0F0";
        ctx.font = fontsize + "px arial";
        for (let i = 0; i < drop.length; i++) {
          const text = tmp[Math.floor(Math.random() * tmp.length)];
          ctx.fillText(text, i * fontsize, drop[i] * fontsize);
          drop[i]++;
          if (drop[i] * fontsize > canvas.height && Math.random() > 0.9) {//90%的几率掉落
            drop[i] = 0;
          }
        }
      }
      setInterval(drap, 80);
      window.addEventListener("resize", () => {
        canvas.setAttribute("width", window.innerWidth);
        canvas.setAttribute("height", window.innerHeight);
      });
    </script>
  </body>

</html>