canvas实现代码雨

let canvas = document.getElementById("canvas") as HTMLCanvasElement;
let ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
canvas.height = screen.availHeight;
canvas.width = screen.availWidth;

let str: string[] = "NIKOXJYNBWDNIKOXJYNBWDNIKOXJYNBWDNIKOXJYNBWD".split("");
let arr = Array(Math.ceil(canvas.width / 10)).fill(0);

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, 50);