当前位置：首页 > VUE

vue实现动态星空效果

2026-02-23 11:23:44VUE

Vue实现动态星空效果

动态星空效果可以通过Vue结合Canvas实现，以下是具体实现方法：

创建Vue组件

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

<script>
export default {
  name: 'StarSky',
  data() {
    return {
      stars: [],
      canvas: null,
      ctx: null,
      width: 0,
      height: 0,
      animationFrame: null
    }
  },
  mounted() {
    this.initCanvas()
    this.createStars()
    this.animate()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationFrame)
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    initCanvas() {
      this.canvas = this.$refs.canvas
      this.ctx = this.canvas.getContext('2d')
      this.width = window.innerWidth
      this.height = window.innerHeight
      this.canvas.width = this.width
      this.canvas.height = this.height
    },
    createStars() {
      const starCount = Math.floor(this.width * this.height / 1000)
      this.stars = Array.from({ length: starCount }, () => ({
        x: Math.random() * this.width,
        y: Math.random() * this.height,
        radius: Math.random() * 1.5,
        vx: Math.random() * 0.5 - 0.25,
        vy: Math.random() * 0.5 - 0.25,
        alpha: Math.random()
      }))
    },
    drawStars() {
      this.ctx.clearRect(0, 0, this.width, this.height)
      this.ctx.fillStyle = 'white'

      this.stars.forEach(star => {
        this.ctx.globalAlpha = star.alpha
        this.ctx.beginPath()
        this.ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2)
        this.ctx.fill()
      })
    },
    updateStars() {
      this.stars.forEach(star => {
        star.x += star.vx
        star.y += star.vy

        if (star.x < 0 || star.x > this.width) {
          star.vx = -star.vx
        }
        if (star.y < 0 || star.y > this.height) {
          star.vy = -star.vy
        }

        star.alpha = 0.5 + 0.5 * Math.sin(Date.now() * 0.001 + star.x * star.y * 0.00001)
      })
    },
    animate() {
      this.drawStars()
      this.updateStars()
      this.animationFrame = requestAnimationFrame(this.animate)
    },
    handleResize() {
      this.width = window.innerWidth
      this.height = window.innerHeight
      this.canvas.width = this.width
      this.canvas.height = this.height
      this.createStars()
    }
  }
}
</script>

<style>
.star-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.star-canvas {
  display: block;
}
</style>

优化星空效果

添加闪烁效果：通过修改alpha值让星星随机闪烁

star.alpha = 0.5 + 0.5 * Math.sin(Date.now() * 0.001 + star.x * star.y * 0.00001)

增加流星效果：在星空背景中添加随机出现的流星


addShootingStar() {
const star = {
 x: Math.random() * this.width,
 y: 0,
 radius: 2,
 vx: (Math.random() - 0.5) * 2,
 vy: 2 + Math.random() * 3,
 alpha: 1,
 tail: []
}
this.stars.push(star)

setTimeout(() => { const index = this.stars.indexOf(star) if (index > -1) { this.stars.splice(index, 1) } }, 2000) }


3. 性能优化：对于大量星星，使用requestAnimationFrame进行动画循环
```javascript
animate() {
  this.drawStars()
  this.updateStars()
  this.animationFrame = requestAnimationFrame(this.animate)
}

使用组件

在需要星空效果的页面中引入并使用该组件：

<template>
  <div>
    <star-sky />
    <!-- 其他页面内容 -->
  </div>
</template>

<script>
import StarSky from '@/components/StarSky.vue'

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

自定义配置

可以通过props让组件更灵活：

props: {
  starCount: {
    type: Number,
    default: 500
  },
  speed: {
    type: Number,
    default: 0.5
  },
  color: {
    type: String,
    default: 'white'
  }
}

然后在创建星星时使用这些props：

this.stars = Array.from({ length: this.starCount }, () => ({
  // ...
  vx: (Math.random() * 0.5 - 0.25) * this.speed,
  vy: (Math.random() * 0.5 - 0.25) * this.speed,
  // ...
}))

vue实现动态星空效果