本文使用H5 canvas新属性创建了流星线条，流星的位置随机。
接下来介绍一下思路：
首先定义初始值：
<style>
body{
background: #000;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<body>
<canvas id="stars"></canvas>
</body>
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // 浏览器宽度
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 浏览器高度
var rains = new Array(); // 流星数组
var starCount = 40; // 流星一次显示总数
// 定义初始值
var Star = function(options){
if(typeof options == "undefined"){
options = {};
}
this.default_options = { };
this.options = {};
_this = this;
this.Stars = document.getElementById('stars');
this.Stars.width = w;
this.Stars.height = h;
this.ctx = this.Stars.getContext('2d');
this.x = -1;
this.y = -1;
this.width = -1;//宽度
this.height = -1;//高度
this.length = -1;
this.angle = 30;
this.speed = 1;
this.offsetX = -1;
this.offsetY = -1;
this.alpha = 1;
this.color = 'purple';
this.color1 = 'white';
this.color2 = 'orange';
// this.img = new Image();
}
然后给Star添加方法：
Star.prototype = {
......
}
init()方法初始化流星
// 初始化
_init: function(){
_this._getPos();
//最小长度，最大长度
var x = Math.random() * 80 + 150;
_this.length = Math.ceil(x);
// _this.length = 0;
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.offsetX = _this.speed * cos;
_this.offsetY = _this.speed * sin;
},
draw()方法绘制流星
_draw: function(){
_this.ctx.save();
_this.ctx.beginPath();
_this.ctx.lineWidth = 0.3;
_this.ctx.globalAlpha = _this.alpha;
//创建横向渐变颜色,起点坐标至终点坐标
var line = _this.ctx.createLinearGradient(_this.x, _this.y,
_this.x + _this.width,
_this.y - _this.height);
//分段设置颜色
line.addColorStop(0, _this.color);
line.addColorStop(0.3, _this.color1);
line.addColorStop(0.6, _this.color2);
_this.ctx.strokeStyle = line;
// 起点
_this.ctx.moveTo(_this.x, _this.y);
//终点
_this.ctx.lineTo(_this.x + _this.width, _this.y - _this.height);
_this.ctx.closePath();
_this.ctx.stroke();
_this.ctx.restore();
},
move()更新流星位置
_move: function () {
//清空流星像素
var x = _this.x + _this.width - _this.offsetX;
var y = _this.y - _this.height;
_this.ctx.clearRect(x - 3, y - 3, _this.offsetX + 5, _this.offsetY + 5);
//重新计算位置，往左下移动
_this._countPos();
//透明度增加
_this.alpha -= 0.002;
//重绘
_this._draw();
},
_getPos: function(){
_this.x = Math.random() * w;
_this.y = Math.random() * h;
},
/***************重新计算流星坐标的函数******************/
_countPos: function (){
//往左下移动,x减少，y增加
_this.x = _this.x - _this.offsetX;
_this.y = _this.y + _this.offsetY;
},
把上面的方法定义好，但是屏幕还是什么都没有，那么就让流星显示出来吧！！！
// 绘制流星
function playRains(){
for (var n = 0; n < starCount; n++) {
var rain = rains[n];
rain._move();//移动
if (rain.y > h || rain.x < 0) {//超出界限后重来
rain.ctx.clearRect(rain.x, rain.y - rain.height, rain.width, rain.height);
rains[n] = new Star();
rains[n]._init();
}
}
}
window.onload = function(){
// 画流星
for(var i = 0;i < starCount;i++){
var star = new Star();
star._init();
star._draw();
rains.push(star);
}
setInterval(playRains, 60);
}
最后写一个问题，流星只能一个个出现，虽然定义了一次出现的最多流星数量，但是没有效果，如果有想法请留言，不甚感谢！
