效果图
粒子动画.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<particles.length;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);
};
