VUE3.0实现黑客代码雨

<template>
  <div>
    <canvas id="c"></canvas>
  </div>
</template>

<script setup>

import {onMounted} from "vue";

let canvas = null;
let ctx = null;
let chinese = "010110";
let font_size = 10;
let columns = 0;
let drops = [];

onMounted(async () => {

  canvas = document.getElementById("c");
  ctx = canvas.getContext("2d");
  initCanvas();
  initDrops();
  setInterval(draw, 50);
})


const initCanvas = () => {
  canvas.height = window.innerHeight;
  canvas.width = window.innerWidth;
  columns = canvas.width / font_size;
}

const initDrops = () => {
  for (let x = 0; x < columns; x++) {
    drops[x] = 1;
  }
}

const draw = () => {
  ctx.fillStyle = "rgba(0,0,0,0.05)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#0F0";
  ctx.font = font_size + "px arial";

  for (let i = 0; i < drops.length; i++) {
    const text = chinese[Math.floor(Math.random() * chinese.length)];

    ctx.fillText(text, i * font_size, drops[i] * font_size);

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

    drops[i]++;
  }
}

</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

body {
  background: black;
}

canvas {
  display: block;
}
</style>

这是一个基本的 Vue.js 组件，它将代码雨动画嵌入到一个 Vue 应用中。在 onMounted() 钩子中，我们获取了 canvas 元素的上下文，然后创建代码雨并启动动画。你可以将此组件嵌入到你的 Vue.js 应用程序中并进行进一步的自定义。