当前位置：首页 > VUE

代码雨实现vue

2026-03-10 06:21:30VUE

实现代码雨效果的Vue组件

创建Vue组件实现类似《黑客帝国》中的代码雨效果，可以通过Canvas绘制随机下落字符。以下是具体实现方法：

代码雨实现vue

基础组件结构

<template>
  <div class="code-rain-container">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  name: 'CodeRain',
  props: {
    fontSize: {
      type: Number,
      default: 16
    },
    speed: {
      type: Number,
      default: 30
    },
    characters: {
      type: String,
      default: '01アイウエオカキクケコサシスセソタチツテト'
    }
  },
  data() {
    return {
      columns: 0,
      drops: [],
      ctx: null
    }
  },
  mounted() {
    this.initCanvas()
    this.startAnimation()
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationFrame)
  },
  methods: {
    initCanvas() {
      const canvas = this.$refs.canvas
      canvas.width = canvas.parentElement.clientWidth
      canvas.height = canvas.parentElement.clientHeight
      this.ctx = canvas.getContext('2d')

      this.columns = Math.floor(canvas.width / this.fontSize)
      this.drops = Array(this.columns).fill(0)
    },
    startAnimation() {
      this.draw()
    },
    draw() {
      const canvas = this.$refs.canvas
      this.ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
      this.ctx.fillRect(0, 0, canvas.width, canvas.height)

      this.ctx.fillStyle = '#0F0'
      this.ctx.font = `${this.fontSize}px monospace`

      for (let i = 0; i < this.drops.length; i++) {
        const text = this.characters.charAt(
          Math.floor(Math.random() * this.characters.length)
        )
        this.ctx.fillText(text, i * this.fontSize, this.drops[i] * this.fontSize)

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

      this.animationFrame = requestAnimationFrame(this.draw)
    }
  }
}
</script>

<style scoped>
.code-rain-container {
  width: 100%;
  height: 100%;
  background-color: black;
  overflow: hidden;
}
canvas {
  display: block;
}
</style>

优化版本特性

性能优化：使用requestAnimationFrame实现流畅动画
自定义参数：可通过props调整字体大小、下落速度和字符集
响应式设计：自动适应容器尺寸变化

使用方法

<template>
  <div style="width: 100%; height: 500px;">
    <CodeRain :speed="40" :fontSize="14" />
  </div>
</template>

<script>
import CodeRain from './CodeRain.vue'

export default {
  components: {
    CodeRain
  }
}
</script>