效果图

粒子动画.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);
  };

完整代码地址：https://github.com/McRayFE/CanvasParticle