SOURCE

/**
 * @type {HTMLCanvasElement}
 */
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const { width, height } = canvas;

const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789".split("");
const len = str.length;
const w=10;
const arr = new Array(Math.ceil(width / w)).fill(0);
function color16() {//十六进制颜色随机
    var r = Math.floor(Math.random() * 256);
    var g = Math.floor(Math.random() * 256);
    var b = Math.floor(Math.random() * 256);
    var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
    return color;

}

const draw = () => {
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, width, height);
    ctx.fillStyle = color16();
   
    arr.forEach((i, index) => {
        ctx.fillText(str[Math.floor(len * Math.random())], index * w, i + w);
        arr[index] = i > height || i > 8888 * Math.random() ? 0 : i + w;
    });
    window.requestAnimationFrame(draw)
};

draw();

<canvas id="canvas" width="500" height="500"></canvas>

#canvas {
    width: 500px;
    height: 500px;
    background: black;
}