效果图
实现思路
1.写一个流星对象
//定义流星雨
function Fire(){
this.x=getRandom(0,canvas.width),//流星雨的x坐标
this.y=0,//流星雨的y坐标
this.radius=getRandom(0.5,2),//流星雨的半径
this.speed=getRandom(2,4),//运行的速度
this.angle=0.6*Math.PI,//发射的方向
//this.color='white';//颜色
//设定颜色Math.random()>0.4 来设定一部分是白色的，剩下的是彩色的。
this.color=Math.random()>0.4 ? 'white' : ('#' + Math.random().toString(16).substr(2, 6).toUpperCase());
}x的范围是0到画布的最大宽度，这样就可以从左到右出现流星了；
y固定为0，在最上面也就是空中；
speed是流星飞行的速度；
angle是流星飞行的方向，目前固定为0.6个π，其实可以写成可传入的，这样就可以朝多个方向发射了，new的时候传进来，然后处理一下即可，我这里就不做了；
color采用了白色和彩色随机出现的方式；
2.给流星的原型增加一个绘制方法
//绘制流星
Fire.prototype.draw=function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,2*Math.PI);//画圆
ctx.fillStyle=this.color;
ctx.fill();
ctx.closePath();
}3.给流星的原型增加一个更新流星的位置的方法
Fire.prototype.update=function(){
//更新X坐标
this.x+=Math.cos(this.angle)*this.speed;
//更新Y坐标
this.y+=Math.sin(this.angle)*this.speed;
//控制飞行的最大位置
if(this.y>canvas.height*0.9 || this.x<canvas.width*0.02 || this.x>canvas.width*0.98){
//达到最大位置后
this.restore();//将流星重置
}
}4.给流星的原型增加一个恢复状态的方法（在流星运行到边界后重新回到天上）
//重置流星雨的位置参数，以便再次发射
Fire.prototype.restore=function(){
this.x=getRandom(0,canvas.width);
this.y=0;
}5.创建一个数组，用于存储流星，组合起来就是流星雨了（目前设定为14颗流星）
//创建流星雨对象
for(var i=0;i<14;i++){
var fire = new Fire();
//添加到数组中
arr.push(fire);
}6.自动执行动画函数
(function move(){
//执行动画函数
window.requestAnimationFrame(move);
clear();//清理画布
//循环存流星雨数组
arr.forEach(function(c){
c.draw();
c.update();
})
})();7.清洗画布，并给流星加上小尾巴（rgba）
function clear() {
ctx.fillStyle = 'rgba(0,0,0,0.3)';//用到rgba，这样就可以给流星留下小尾巴
ctx.fillRect(0,0,canvas.width,canvas.height);
}到这里就已经完成了
完整代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="GBK">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id='canvas'></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
canvas.width=document.documentElement.clientWidth;
canvas.height=document.documentElement.clientHeight;
var ctx = canvas.getContext("2d");
var arr=[];//存取流星雨的数组
//获取一定范围内的随机数
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
//定义流星雨
function Fire(){
this.x=getRandom(0,canvas.width),//流星雨的x坐标
this.y=0,//流星雨的y坐标
this.radius=getRandom(0.5,2),//流星雨的半径
this.speed=getRandom(2,4),//运行的速度
this.angle=0.6*Math.PI,//发射的方向
//this.color='white';//颜色
//设定颜色Math.random()>0.4 来设定一部分是白色的，剩下的是彩色的。
this.color=Math.random()>0.4 ? 'white' : ('#' + Math.random().toString(16).substr(2, 6).toUpperCase());
}
//绘制流星
Fire.prototype.draw=function(){
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,2*Math.PI);//画圆
ctx.fillStyle=this.color;
ctx.fill();
ctx.closePath();
}
//重置流星雨的位置参数，以便再次发射
Fire.prototype.restore=function(){
this.x=getRandom(0,canvas.width);
this.y=0;
}
//更新流星的位置，达到运动的效果
Fire.prototype.update=function(){
//更新X坐标
this.x+=Math.cos(this.angle)*this.speed;
//更新Y坐标
this.y+=Math.sin(this.angle)*this.speed;
//控制飞行的最大位置
if(this.y>canvas.height*0.9 || this.x<canvas.width*0.02 || this.x>canvas.width*0.98){
//达到最大位置后
this.restore();//将流星重置
}
}
//创建流星雨对象
for(var i=0;i<14;i++){
var fire = new Fire();
//添加到数组中
arr.push(fire);
}
//清洗画布
function clear() {
ctx.fillStyle = 'rgba(0,0,0,0.3)';//用到rgba，这样就可以给流星留下小尾巴
ctx.fillRect(0,0,canvas.width,canvas.height);
}
(function move(){
//执行动画函数
window.requestAnimationFrame(move);
clear();//清理画布
//循环存流星雨数组
arr.forEach(function(c){
c.draw();
c.update();
})
})();
</script>
</body>
</html>