JSFiddle - React, Tailwind, and code Playground

by ph822720355

JavaScript

function matrixRain() {  
			const chars = ['▋','■','▃','▆']; // 固定字元集
      const canvas = document.createElement("canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      canvas.style.position = "fixed";
      canvas.style.top = 0;
      canvas.style.left = 0;
      canvas.style.zIndex = -1;
      document.body.appendChild(canvas);

      const context = canvas.getContext("2d");
      const fontSize = 14;
      const columns = canvas.width / fontSize;
      const drops = [];

      for (let i = 0; i < columns; i++) {
        drops[i] = 1;
      }

      function drawMatrixRain() {
        context.fillStyle = "rgba(0, 12, 7, 0.1)";
        context.fillRect(0, 0, canvas.width, canvas.height);

        context.fillStyle = "#11a6ed";
        context.font = fontSize + "px Courier";

        for (let i = 0; i < drops.length; i++) {
          //const text = '■' //String.fromCharCode(Math.random() * 128);
          const text = chars[Math.floor(Math.random() * chars.length)];
          const x = i * fontSize;
          const y = drops[i] * fontSize;

          context.fillText(text, x, y);

          if (y > canvas.height && Math.random() > 0.975) {
            drops[i] = 0;
          }

          drops[i]++;
        }
      }

      setInterval(drawMatrixRain, 200);
    }
    
    matrixRain();