流星特效"/>
H5 canvas流星特效
本文使用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);
}
复制代码最后写一个问题，流星只能一个个出现，虽然定义了一次出现的最多流星数量，但是没有效果，如果有想法请留言，不甚感谢！
转载于:
更多推荐
H5 canvas流星特效
发布评论