第JavaScript實(shí)現(xiàn)流星雨效果的示例代碼目錄演示技術(shù)棧源碼首先建立星星對(duì)象讓星星閃亮起來(lái)創(chuàng)建流星雨對(duì)象讓流星動(dòng)起來(lái)

演示

上一次做了一個(gè)雨滴的動(dòng)畫，順著這種思維正好可以改成流星雨，嘿嘿我真是一個(gè)小機(jī)靈。

技術(shù)棧

還是先建立畫布

body

canvasid="stars"/canvas

/body

畫布標(biāo)簽我昨天講過(guò)了。不知道的小伙伴可以去看看。

源碼

首先建立星星對(duì)象

//創(chuàng)建一個(gè)星星對(duì)象

varStar=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(_r0.5){

this.color="#333";

}else{

this.color="white";

//初始化

this.init=function(){

this.getColor();

//繪制

this.draw=function(){

context.fill>

讓星星閃亮起來(lái)

//頁(yè)面加載的時(shí)候

window.onload=function(){

init();

//畫星星

for(vari=0;istarCount;i++){

varstar=newStar();

star.init();

star.draw();

arr.push(star);

//畫流星

for(vari=0;irainCount;i++){

varrain=newMeteorRain();

rain.init();

rain.draw();

rains.push(rain);

drawMoon();//繪制月亮

playStars();//繪制閃動(dòng)的星星

playRains();//繪制流星

//星星閃起來(lái)

functionplayStars(){

for(varn=0;nstarCount;n++){

arr[n].getColor();

arr[n].draw();

setTimeout("playStars()",100);

}

創(chuàng)建流星雨對(duì)象

varMeteorRain=function(){

this.x=-1;

this.y=-1;

this.length=-1;//長(zhǎng)度

this.angle=30;//傾斜角度

this.width=-1;//寬度

this.height=-1;//高度

this.speed=1;//速度

this.offset_x=-1;//橫軸移動(dòng)偏移量

this.offset_y=-1;//縱軸移動(dòng)偏移量

this.alpha=1;//透明度

this.color1="";//流星的色彩

this.color2="";//流星的色彩

/****************初始化函數(shù)********************/

this.init=function()//初始化

this.getPos();

this.alpha=1;//透明度

this.getRandomColor();

//最小長(zhǎng)度，最大長(zhǎng)度

varx=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);//流星的速度

varcos=Math.cos(this.angle*3.14/180);

varsin=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(){

vara=Math.ceil(255-240*Math.random());

//中段顏色

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

//結(jié)束顏色

this.color2="black";

}

讓流星動(dòng)起來(lái)

this.draw=function()//繪制一個(gè)流星的函數(shù)

context.save();

context.beginPath();

context.lineWidth=1;//寬度

context.globalAlpha=this.alpha;//設(shè)置透明度