当前位置：首页 > VUE

代码雨实现vue

2026-02-18 17:06:30VUE

实现代码雨效果（Vue版）

在Vue中实现代码雨效果可以通过Canvas绘制结合动画帧实现。以下是完整实现方案：

核心代码结构

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

<script>
export default {
  mounted() {
    this.initCodeRain()
  },
  methods: {
    initCodeRain() {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')

      // 设置画布尺寸为窗口大小
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight

      // 定义字符集（可自定义）
      const chars = "01あいうえおABCDEFGHIJKLMNOPQRSTUVWXYZ"

      // 计算列宽（基于字符尺寸）
      const fontSize = 16
      const columns = Math.floor(canvas.width / fontSize)

      // 初始化每列的Y位置
      const drops = Array(columns).fill(0)

      // 绘制函数
      const draw = () => {
        // 半透明背景（形成拖尾效果）
        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
        ctx.fillRect(0, 0, canvas.width, canvas.height)

        // 设置文字样式
        ctx.fillStyle = '#0F0' // 经典绿色
        ctx.font = `${fontSize}px monospace`

        // 为每列绘制字符
        drops.forEach((drop, i) => {
          // 随机选择字符
          const text = chars.charAt(Math.floor(Math.random() * chars.length))

          // 绘制字符
          ctx.fillText(text, i * fontSize, drop * fontSize)

          // 重置到达底部的列
          if (drop * fontSize > canvas.height && Math.random() > 0.975) {
            drops[i] = 0
          }

          // 移动Y坐标
          drops[i]++
        })

        // 循环动画
        requestAnimationFrame(draw)
      }

      // 开始动画
      draw()

      // 窗口大小变化时重置
      window.addEventListener('resize', () => {
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
      })
    }
  }
}
</script>

<style>
.code-rain {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1; /* 作为背景 */
}
</style>

自定义参数调整

颜色修改：更改ctx.fillStyle值为其他颜色如#00FFFF（青色）
字符集扩展：在chars字符串中添加更多符号或不同语言字符
下落速度：调整drops[i]++为drops[i] += 0.5可减慢速度

性能优化版本

对于需要长时间运行的场景，可添加以下优化：

data() {
  return {
    animationFrame: null
  }
},
beforeDestroy() {
  cancelAnimationFrame(this.animationFrame)
},
methods: {
  draw() {
    // ...原有draw内容...
    this.animationFrame = requestAnimationFrame(this.draw)
  }
}

添加渐变效果

增强视觉效果可修改绘制逻辑：

// 在draw函数内添加：
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height)
gradient.addColorStop(0, '#0F0')
gradient.addColorStop(0.5, '#0FF')
gradient.addColorStop(1, '#F0F')
ctx.fillStyle = gradient

此实现将创建经典的《黑客帝国》风格代码雨效果，作为网页背景或独立视觉元素均可。通过调整参数可获得不同风格的视觉效果。

代码雨实现vue