HTML5练习（2）陪你去看流星雨

在上一篇的基础上
1、新增流星雨对象

 

//流星

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  =  "" ;   //流星的色彩

     /****************初始化函数********************/

     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 ;

     }

     /**************获取随机颜色函数*****************/

     this . getRandomColor  =  function  ( ) {

         var  a  =  255  *  Math . random ( ) ; 

         a  =  Math . ceil ( a ) ;

         var  a1  =  255  *  Math . random ( ) ; 

         a1  =  Math . ceil ( a1 ) ;

         var  a2  =  255  *  Math . random ( ) ; 

         a2  =  Math . ceil ( a2 ) ;

         //中段颜色

         this . color1  =  "rgba("  +  a . toString ( )  +  ","  +  a1 . toString ( )  +  ","  +  a2 . toString ( )  +  ",1)" ;

         //结束颜色

         this . color2  =  "black" ;

     }

      /***************重新计算流星坐标的函数******************/

     this . countPos  =  function  ( ) //

     {

         //往左下移动,x减少，y增加

         this . x  =  this . x  -  this . offset_x ;

         this . y  =  this . y  +  this . offset_y ;

     }

     /*****************获取随机坐标的函数*****************/

     this . getPos  =  function  ( )  //

     {

         //横坐标200--1200

         var  x  =  Math . random ( )  *  1000  +  400 ;

         this . x  =  Math . ceil ( x ) ;

         x  =  Math . random ( )  *  600 ;

         //纵坐标小于600

         this . y  =  Math . ceil ( x ) ;

     }

      /****绘制流星***************************/

     this . draw  =  function  ( )  //绘制一个流星的函数

     {

         context . save ( ) ;

         context . beginPath ( ) ;

         context . lineWidth  =  3 ;

         context . globalAlpha  =  this . alpha ;  //设置透明度

         //创建横向渐变颜色,起点坐标至终点坐标

         var  line  =  context . createLinearGradient ( this . x ,  this . y , 

             this . x  +  this . width , 

             this . y  -  this . height ) ;

         //分段设置颜色

         line . addColorStop ( 0 ,  "white" ) ;

         line . addColorStop ( 0.1 ,  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 ( ) ; 

     }

    

}

 

该对象已自带绘制自己的方法，主要是设置渐变色，设置线宽，然后画一条线
还有移动的方法，就是做偏移，将偏移后的尾巴清除，再重绘

2、初始化若干个流星
在onload监听中加入：

 

//全局变量

var  rains  =  new  Array ( ) ;

var  rainCount  =  20 ;

//onload监听中加入

//流星来了

for  ( var  i = 0 ; i < rainCount ; i ++ )  {

     var  rain  =  new  MeteorRain ( ) ;

     rain . init ( ) ;

     rain . draw ( ) ;

     rains . push ( rain ) ;

}

 

3、流星出现后，要让其移动

 

function  playRains ( ) {

     for  ( var  n  =  0 ;  n  <  rainCount ;  n ++ ) {  

         var  rain  =  rains [ n ] ;

         rain . move ( ) ; //移动

         if ( rain . y > 600 ) { //超出界限后重来

              context . clearRect ( rain . x , rain . y - rain . height , rain . width , rain . height ) ;

              rains [ n ]  =  new  MeteorRain ( ) ;

              rains [ n ] . init ( ) ;

         }

     }  

     setTimeout ( "playRains()" , 50 ) ;

}

 

然后在onload中加入代码：

 

playRains ( ) ;

 

4、添加背景音乐

 

< audio  src = "audio/F4 - 陪你去看流星雨.mp3"  autoplay = "true"  loop = "true" > </ audio >

 

收工！！