canvas代码雨特效

功能记录：在vue中通过canvas实现类似于CSDN的代码雨特效

• 需要在项目中安装canvas后使用,功能可参考canvas官网。

// html
<template>
  <div>
    <canvas id="canvas" class="canvas" />
  </div>
</template>

<script>
export default {
  mounted() {
    this.initCodeRain()
  },
  methods: {
    initCodeRain() {
      const canvas = document.getElementById('canvas')
      const ctx = canvas.getContext('2d')
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight

      // 字符样式
      const fontSize = 16
      const fontFamily = 'Monospace'
      const color = 'rgba(255, 255, 255, 0.7)' // 初始颜色带有一定透明度

      // 字符数组
      const chars = '0123456789'

      // 字符对象数组
      let droplets = []

      // 初始化字符
      function initDroplets() {
        for (let i = 0; i < 100; i++) {
          droplets.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            char: chars[Math.floor(Math.random() * chars.length)],
            speed: 1 + Math.random() * 2,
            alpha: 1, // 初始不透明度为1
          })
        }
      }

      // 更新和绘制字符
      function updateAndDraw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        for (let i = 0; i < droplets.length; i++) {
          const droplet = droplets[i]

          // 更新位置和透明度
          droplet.y += droplet.speed
          droplet.alpha -= 0.003 // 逐渐降低不透明度

          // 如果字符到达底部或完全透明，则重新初始化其位置和透明度
          if (droplet.y > canvas.height || droplet.alpha <= 0) {
            droplet.y = Math.random() * -canvas.height
            droplet.alpha = 1
          }

          // 绘制字符
          ctx.font = `${fontSize}px ${fontFamily}`
          ctx.fillStyle = `rgba(0, 255, 255, ${droplet.alpha})` // 使用带有透明度的颜色
          droplet.char =
            Math.random() < 0.1
              ? chars[Math.floor(Math.random() * chars.length)]
              : droplet.char
          ctx.fillText(droplet.char, droplet.x, droplet.y + fontSize)

          let num = Math.random() * 20
          for (let j = 0; j < num; j++) {
            ctx.fillStyle = `rgba(0, 255, 255, ${droplet.alpha - (j * 0.001 * num) / 10
              })` // 使用带有透明度的颜色
            droplet.char =
              Math.random() < 0.2
                ? chars[Math.floor(Math.random() * chars.length)]
                : droplet.char
            ctx.fillText(
              droplet.char,
              droplet.x,
              droplet.y + fontSize - j * fontSize
            )
          }
        }
        requestAnimationFrame(updateAndDraw) // 浏览器中实现动画循环
      }

      // 开始动画
      initDroplets()
      updateAndDraw()
    },
  }
}
</script>

// css
<style lang="scss" scoped>
//覆盖整个屏幕，可调整z-index避免遮盖其他功能使用
 .canvas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
</style>