代码雨效果

<template>
  <div class="containers">
    <canvas id="bg"></canvas>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, ref } from 'vue';
nextTick(() => {
  const cvs: any = document.getElementById('bg');
  const width = window.innerWidth * devicePixelRatio, height = window.innerHeight * devicePixelRatio;
  cvs.width = width;
  cvs.height = height;
  const ctx = cvs.getContext('2d');
  const fontSize = 20 * devicePixelRatio;
  const columnWidth = fontSize;
  const columnCount = Math.floor(width / columnWidth);
  const nextChars = new Array(columnCount).fill(0);
  const draw = () => {
    ctx.fillStyle = 'rgba(0,0,0,0.1)';
    ctx.fillRect(0, 0, width, height);
    for (let i = 0; i < columnCount; i++) {
      const char = getRandomChar();
      const color = getRandomColor();
      ctx.fillStyle = color;
      ctx.font = `${fontSize}px "Roboto Mono"`;
      const x = columnWidth * i;
      const index = nextChars[i];
      const y = (index + 1) * fontSize;
      ctx.fillText(char, x, y);
      if (y > height && Math.random() > 0.99) {
        nextChars[i] = 0;
      } else {
        nextChars[i]++;
      }
    }
  }
  const getRandomColor = () => {
    const fontColors = [
      "#33b5e5",
      "#0099cc",
      "#aa66cc",
      "#9933cc",
      "#A0522D",
      "#A52A2A",
      "#ADFF2F",
      "#C71585",
      "#DAA520",
      "#FF00FF"
    ];
    return fontColors[Math.floor(Math.random() * fontColors.length)];
  }
  const getRandomChar = () => {
    const str = 'I LOVE YOU &=& i love you';
    return str[Math.floor(Math.random() * str.length)]
  }
  draw();
  setInterval(() => {
    draw();
  }, 40);
});
</script>
<style lang="scss" scoped>
.containers {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#bg {
  background: #000;
  height: 100%;
  width: 100%;
}
</style>