html5 粒子动画,HTML5 Canvas粒子喷射动画

效果图

粒子动画.PNG

设计思路

第一步，创建canvas元素和2D上下文

var canvas = document.createElement("canvas");

var context = canvas.getContext('2d');

var canvasHeight = window.innerHeight;

var canvasWidth = window.innerWidth;

第二步，初始化

//初始化一个数组存放粒子

var particles = [];

init();

function init(){

document.body.appendChild(canvas);

canvas.width = canvasWidth;

canvas.height = canvasHeight;

}

第三步，采用面向对象的思想，创建一个粒子类

//粒子类

function Particle(x,y){

this.x = x;

this.y = y;

this.step = -5;//加入垂直方向的增量,负值就向上运动

this.xVel = 0;

this.gravity = 0.1;//增加重力影响

this.counter = 0;//影响颜色

/*绘制粒子*/

this.render = function(context){

//hsl(H,S,L)

//H:0-360,S:饱和度0.0%-100.0%，L：亮度0.0%-100.0%

context.fillStyle = "hsl("+this.counter+",100%,50%)";

context.beginPath();

context.arc(this.x,this.y,3,0,2*Math.PI,true);

context.fill();

};

/*更新数组中粒子的位置和颜色*/

this.update = function(){

this.y += this.step;

this.step += this.gravity;

this.x += this.xVel;

this.counter += 2;

};

}

第四步，定义一个循环loop函数随机产生粒子

function loop(x,y){

//清除canvas中的内容，不然会重复绘制数组中的粒子

context.fillStyle = "rgba(0,0,0,1)";

context.fillRect(0,0,canvasWidth,canvasHeight);

//随机产生一个粒子

var particle = new Particle(x,y);

particle.xVel = Math.random()*4-2;//给粒子一个水平位置变化量

particles.push(particle);//加入数组中

if(particles.length > 2000){

particles.shift();

}

for(var i=0;i

var particle = particles[i];

//绘制数组中的每一个粒子

particle.render(context);

//更新数组中的每一个粒子

particle.update();

}

}

第五步，设置鼠标点击事件，每点击一下，就在点击的位置，产生一个粒子喷射动画

document.onclick = function(e){

var x = e.clientX;

var y = e.clientY;

console.log(e.clientX);

console.log(e.clientY);

setInterval(function(){

loop(x,y);

},1000/30);

};