快捷導(dǎo)航

canvas實現(xiàn)流星雨的背景效果

更新時間：2017年01月13日 14:56:48 作者：娜娜子

本文主要介紹了canvas實現(xiàn)流星雨的背景效果的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧

看到一個很棒的流星雨效果。修改一下樣式就可以作為網(wǎng)頁背景了。。！

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>一起來看流星雨</title>
    <script>
      var context;
      var arr = new Array();
      var starCount = 800;
      var rains = new Array();
  var rainCount =20;
      //初始化畫布及context
      function init(){
        //獲取canvas
        var stars = document.getElementById("stars");
        windowWidth = window.innerWidth; //當(dāng)前的窗口的高度
        stars.width=windowWidth;
  stars.height=window.innerHeight;
        //獲取context
        context = stars.getContext("2d");
      }
      //創(chuàng)建一個星星對象
      var Star = function (){
        this.x = windowWidth * Math.random();//橫坐標(biāo)
        this.y = 5000 * Math.random();//縱坐標(biāo)
        this.text=".";//文本
        this.color = "white";//顏色
        //產(chǎn)生隨機(jī)顏色
        this.getColor=function(){
          var _r = Math.random();
          if(_r<0.5){
            this.color = "#333";
          }else{
            this.color = "white";
          }
        }
        //初始化
        this.init=function(){
          this.getColor();
        }
        //繪制
        this.draw=function(){
          context.fillStyle=this.color;
          context.fillText(this.text,this.x,this.y);
        }
      }
       //畫月亮
      function drawMoon(){
         var moon = new Image();
           moon.src = "./images/moon.jpg"
           context.drawImage(moon,-5,-10);
      }
      //頁面加載的時候
      window.onload = function() {
        init();
        //畫星星
        for (var i=0;i<starCount;i++) {
          var star = new Star();
          star.init();
          star.draw();
          arr.push(star);
        }
        //畫流星
        for (var i=0;i<rainCount;i++) {
    var rain = new MeteorRain();
    rain.init();
    rain.draw();
    rains.push(rain);
  }
        drawMoon();//繪制月亮
        playStars();//繪制閃動的星星
  playRains();//繪制流星

      }
       //星星閃起來
      function playStars(){
        for (var n = 0; n < starCount; n++){ 
          arr[n].getColor(); 
          arr[n].draw(); 
        } 

        setTimeout("playStars()",100);
      }

  /*流星雨開始*/
 var MeteorRain = function(){
   this.x = -1;
   this.y = -1;
   this.length = -1;//長度
   this.angle = 30; //傾斜角度
   this.width = -1;//寬度
   this.height = -1;//高度
   this.speed = 1;//速度
   this.offset_x = -1;//橫軸移動偏移量
   this.offset_y = -1;//縱軸移動偏移量
   this.alpha = 1; //透明度
   this.color1 = "";//流星的色彩
   this.color2 = ""; //流星的色彩
  /****************初始化函數(shù)********************/
  this.init = function () //初始化
  {
    this.getPos();
    this.alpha = 1;//透明度
    this.getRandomColor();
    //最小長度，最大長度
    var x = Math.random() * 80 + 150;
    this.length = Math.ceil(x);
//         x = Math.random()*10+30;
    this.angle = 30; //流星傾斜角
    x = Math.random()+0.5;
    this.speed = Math.ceil(x); //流星的速度
    var cos = Math.cos(this.angle*3.14/180);
    var sin = Math.sin(this.angle*3.14/180) ;
    this.width = this.length*cos ; //流星所占寬度
    this.height = this.length*sin ;//流星所占高度
    this.offset_x = this.speed*cos ;
    this.offset_y = this.speed*sin;
  }
  /**************獲取隨機(jī)顏色函數(shù)*****************/
  this.getRandomColor = function (){
    var a = Math.ceil(255-240* Math.random()); 
    //中段顏色
    this.color1 = "rgba("+a+","+a+","+a+",1)";
    //結(jié)束顏色
    this.color2 = "black";
  }
   /***************重新計算流星坐標(biāo)的函數(shù)******************/
  this.countPos = function ()//
  {
    //往左下移動,x減少，y增加
    this.x = this.x - this.offset_x;
    this.y = this.y + this.offset_y;
  }
  /*****************獲取隨機(jī)坐標(biāo)的函數(shù)*****************/
  this.getPos = function () //
  {
    //橫坐標(biāo)200--1200
    this.x = Math.random() * window.innerWidth; //窗口高度
    //縱坐標(biāo)小于600
    this.y = Math.random() * window.innerHeight; //窗口寬度
  }
   /****繪制流星***************************/
  this.draw = function () //繪制一個流星的函數(shù)
  {
    context.save();
    context.beginPath();
    context.lineWidth = 1; //寬度
    context.globalAlpha = this.alpha; //設(shè)置透明度
    //創(chuàng)建橫向漸變顏色,起點坐標(biāo)至終點坐標(biāo)
    var line = context.createLinearGradient(this.x, this.y, 
      this.x + this.width, 
      this.y - this.height);
    //分段設(shè)置顏色
    line.addColorStop(0, "white");
    line.addColorStop(0.3, this.color1);
    line.addColorStop(0.6, this.color2);
    context.strokeStyle = line;
    //起點
    context.moveTo(this.x, this.y);
    //終點
    context.lineTo(this.x + this.width, this.y - this.height);
    context.closePath();
    context.stroke();
    context.restore();
  }
  this.move = function(){
    //清空流星像素
    var x = this.x+this.width-this.offset_x;
    var y = this.y-this.height;
    context.clearRect(x-3,y-3,this.offset_x+5,this.offset_y+5); 
//         context.strokeStyle="red";
//         context.strokeRect(x,y-1,this.offset_x+1,this.offset_y+1);
    //重新計算位置，往左下移動
    this.countPos();
    //透明度增加
    this.alpha -= 0.002;
    //重繪
    this.draw(); 
  }
}
//繪制流星
function playRains(){

  for (var n = 0; n < rainCount; n++){ 
    var rain = rains[n];
    rain.move();//移動
    if(rain.y>window.innerHeight){//超出界限后重來
      context.clearRect(rain.x,rain.y-rain.height,rain.width,rain.height);
      rains[n] = new MeteorRain();
      rains[n].init();
    }
  } 
  setTimeout("playRains()",2);
}
 /*流星雨結(jié)束*/
    </script>
    <style type="text/css">
      body{
        background-color: black;
      }
  body,html{width:100%;height:100%;overflow:hidden;}
    </style>
  </head>
  <body>
    <canvas id="stars"></canvas>
  </body>
</html>

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: