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>

 

收工！！