2021/2/18 星空背景组件Starfield

<template>
  <canvas id="starfield"></canvas>
</template>

<script>
export default {
  name:"starfield",
   data(){
    return{
      canvas:{},
      context:{},
      stars:[],
      stars_count:0,
      interval:{},
    }
  },
  methods: {
    ini(){//初始化
      this.canvas = document.getElementById("starfield");
      this.canvas.width = window.innerWidth;
      this.canvas.height = window.innerHeight;
      this.context = this.canvas.getContext("2d");
      this.stars = Array();//数组存放随机生成的星星数据（x,y,大小，颜色，速度）
      this.stars_count = 300;//星星数量
      clearInterval(this.interval);
    },
    makeStars(){
      for(var i=0;i<this.stars_count;i++)
      {
        let x=Math.random() * this.canvas.offsetWidth;
        let y = Math.random() * this.canvas.offsetHeight;
        let radius = Math.random()*0.8;
        let color="rgba("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+",0.8)";
        let speed=Math.random()*0.5;
        let arr={'x':x,'y':y,'radius':radius,'color':color,'speed':speed};//（x,y,大小，颜色，速度）
        this.stars.push(arr);//随机生成的星星数据存在这里
      }

    },
    drawStars(){
      this.context.fillStyle = "#0e1729";
      this.context.fillRect(0,0,this.canvas.width,this.canvas.height);
      for (var i = 0; i < this.stars.length; i++) {
        var x = this.stars[i]['x'] - this.stars[i]['speed'];
        if(x<-2*this.stars[i]['radius']) x= this.canvas.width;
        this.stars[i]['x']=x;
        var y = this.stars[i]['y'];
        var radius = this.stars[i]['radius'];
        this.context.beginPath();
        this.context.arc(x, y, radius*2, 0, 2*Math.PI);
        this.context.fillStyle = "rgba("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+",0.8)";
        this.context.fill();
      }
    }
    
  },
  mounted(){
    this.ini();
    this.makeStars();
    this.interval=setInterval(()=>{this.drawStars()},50);
    window.onresize = () =>{//窗口大小发生变化时重新随机生成星星数据
      this.ini();
      this.makeStars();
      this.interval=setInterval(()=>{this.drawStars()},50);
      }

  }



}
</script>

<style lang="css">
canvas{
    position:fixed;/*设置定位*/
    top:0;
    left:0;
    z-index:-1;/*使画布基于最低层*/
    background:#0e1729;/*画布背景色*/
}
</style>

 

<template>

  <canvas id="starfield"></canvas>

</template>

<script>

export default {

  name:"starfield",

   data(){

    return{

      canvas:{},

      context:{},

      stars:[],

      stars_count:0,

      interval:{},

    }

  },

  methods: {

    ini(){//初始化

      this.canvas = document.getElementById("starfield");

      this.canvas.width = window.innerWidth;

      this.canvas.height = window.innerHeight;

      this.context = this.canvas.getContext("2d");

      this.stars = Array();//数组存放随机生成的星星数据（x,y,大小，颜色，速度）

      this.stars_count = 300;//星星数量

      clearInterval(this.interval);

    },

    makeStars(){

      for(var i=0;i<this.stars_count;i++)

      {

        let x=Math.random() * this.canvas.offsetWidth;

        let y = Math.random() * this.canvas.offsetHeight;

        let radius = Math.random()*0.8;

        let color="rgba("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+",0.8)";

        let speed=Math.random()*0.5;

        let arr={'x':x,'y':y,'radius':radius,'color':color,'speed':speed};//（x,y,大小，颜色，速度）

        this.stars.push(arr);//随机生成的星星数据存在这里

      }

    },

    drawStars(){

      this.context.fillStyle = "#0e1729";

      this.context.fillRect(0,0,this.canvas.width,this.canvas.height);

      for (var i = 0; i < this.stars.length; i++) {

        var x = this.stars[i]['x'] - this.stars[i]['speed'];

        if(x<-2*this.stars[i]['radius']) x= this.canvas.width;

        this.stars[i]['x']=x;

        var y = this.stars[i]['y'];

        var radius = this.stars[i]['radius'];

        this.context.beginPath();

        this.context.arc(x, y, radius*2, 0, 2*Math.PI);

        this.context.fillStyle = "rgba("+Math.random()*255+","+Math.random()*255+","+Math.random()*255+",0.8)";

        this.context.fill();

      }

    }

    

  },

  mounted(){

    this.ini();

    this.makeStars();

    this.interval=setInterval(()=>{this.drawStars()},50);

    window.onresize = () =>{//窗口大小发生变化时重新随机生成星星数据

      this.ini();

      this.makeStars();

      this.interval=setInterval(()=>{this.drawStars()},50);

      }

  }

}

</script>

<style lang="css">

canvas{

  position:fixed;/*设置定位*/

  top:0;

  left:0;

  z-index:-1;/*使画布基于最低层*/

  background:#0e1729;/*画布背景色*/

}

</style>