【烟花代码】，情人节，情侣生日礼物代码适用
【烟花代码】，情人节，情侣生日礼物代码适用
老规矩，先上效果图
图片做了加速处理，放樱花的位置，速度完全由点击控制。
1初始化粒子系统
var Particle = function(x, y, hue){
this.x = x;
this.y = y;
this.coordLast = [
{
x: x, y: y},
{
x: x, y: y},
{
x: x, y: y}
];
this.angle = rand(0, 360);
this.speed = rand(((self.partSpeed - self.partSpeedVariance) <= 0) ? 1 : self.partSpeed - self.partSpeedVariance, (self.partSpeed + self.partSpeedVariance));
this.friction = 1 - self.partFriction/100;
this.gravity = self.partGravity/2;
this.hue = rand(hue-self.hueVariance, hue+self.hueVariance);
this.brightness = rand(50, 80);
this.alpha = rand(40,100)/100;
this.decay = rand(10, 50)/1000;
this.wind = (rand(0, self.partWind) - (self.partWind/2))/25;
this.lineWidth = self.lineWidth;
};
2粒子系统的更新
Particle.prototype.update = function(index){
var radians = this.angle * Math.PI / 180;
var vx = Math.cos(radians) * this.speed;
var vy = Math.sin(radians) * this.speed + this.gravity;
this.speed *= this.friction;
this.coordLast[2].x = this.coordLast[1].x;
this.coordLast[2].y = this.coordLast[1].y;
this.coordLast[1].x = this.coordLast[0].x;
this.coordLast[1].y = this.coordLast[0].y;
this.coordLast[0].x = this.x;
this.coordLast[0].y = this.y;
this.x += vx * self.dt;
this.y += vy * self.dt;
this.angle += this.wind;
this.alpha -= this.decay;
if(!hitTest(0,0,self.cw,self.ch,this.x-this.radius, this.y-this.radius, this.radius*2, this.radius*2) || this.alpha < .05){
self.particles.splice(index, 1);
}
};
3粒子系统的画图
Particle.prototype.draw = function(){
var coordRand = (rand(1,3)-1);
self.ctx.beginPath();
self.ctx.moveTo(Math.round(this.coordLast[coordRand].x), Math.round(this.coordLast[coordRand].y));
self.ctx.lineTo(Math.round(this.x), Math.round(this.y));
self.ctx.closePath();
self.ctx.strokeStyle = 'hsla('+this.hue+', 100%, '+this.brightness+'%, '+this.alpha+')';
self.ctx.stroke();
if(self.flickerDensity > 0){
var inverseDensity = 50 - self.flickerDensity;
if(rand(0, inverseDensity) === inverseDensity){
self.ctx.beginPath();
self.ctx.arc(Math.round(this.x), Math.round(this.y), rand(this.lineWidth,this.lineWidth+3)/2, 0, Math.PI*2, false)
self.ctx.closePath();
var randAlpha = rand(50,100)/100;
self.ctx.fillStyle = 'hsla('+this.hue+', 100%, '+this.brightness+'%, '+randAlpha+')';
self.ctx.fill();
}
}
};
4创建烟花例子
self.createParticles = function(x,y, hue){
var countdown = self.partCount;
while(countdown--){
self.particles.push(new Particle(x, y, hue));
}
};
5绑定鼠标时间，mousedown，mouseup
self.bindEvents = function(){
$(window).on('resize', function(){
clearTimeout(self.timeout);
self.timeout = setTimeout(function() {
self.ctx.lineCap = 'round';
self.ctx.lineJoin = 'round';
}, 100);
});
$(self.canvas).on('mousedown', function(e){
var randLaunch = rand(0, 5);
self.mx = e.pageX - self.canvasContainer.offset().left;
self.my = e.pageY - self.canvasContainer.offset().top;
self.currentHue = rand(self.hueMin, self.hueMax);
self.createFireworks(self.cw/2, self.ch, self.mx, self.my);
$(self.canvas).on('mousemove.fireworks', function(e){
var randLaunch = rand(0, 5);
self.mx = e.pageX - self.canvasContainer.offset().left;
self.my = e.pageY - self.canvasContainer.offset().top;
self.currentHue = rand(self.hueMin, self.hueMax);
self.createFireworks(self.cw/2, self.ch, self.mx, self.my);
});
});
$(self.canvas).on('mouseup', function(e){
$(self.canvas).off('mousemove.fireworks');
});
}
…完整源码，请关注公众号，后台回复领取
