在Chrome中使用高CPU的画布

Question

我正在使用Codepen演示，但在检查chrome中的CPU使用率后，它正在使用大约100％的CPU。经过努力，由于我不是javascript和canvas方面的专家，因此无法解决问题。我需要进行哪些修改才能使其使用更少的CPU。 Codepen Link 根据我的理解，问题在于为粒子设置动画，或者我错了。

// Global Animation Setting
window.requestAnimFrame = 
  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function(callback) {
    window.setTimeout(callback, 1000/60);
};

// Global Canvas Setting
var canvas = document.getElementById('particle');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


// Particles Around the Parent
function Particle(x, y, distance) {
  this.angle = Math.random() * 2 * Math.PI;
  this.radius = Math.random() ; 
  this.opacity =  (Math.random()*5 + 2)/10;
  this.distance = (1/this.opacity)*distance;
  this.speed = this.distance*0.00003;
  
  this.position = {
    x: x + this.distance * Math.cos(this.angle),
    y: y + this.distance * Math.sin(this.angle)
  };
  
  this.draw = function() {
    ctx.fillStyle = "rgba(255,255,255," + this.opacity + ")";
    ctx.beginPath();
    ctx.arc(this.position.x, this.position.y, this.radius, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();
  }
  this.update = function() {
    this.angle += this.speed; 
    this.position = {
      x: x + this.distance * Math.cos(this.angle),
      y: y + this.distance * Math.sin(this.angle)
    };
    this.draw();
  }
}

function Emitter(x, y) {
  this.position = { x: x, y: y};
  this.radius = 30;
  this.count = 3000;
  this.particles = [];
  
  for(var i=0; i< this.count; i ++ ){
    this.particles.push(new Particle(this.position.x, this.position.y, this.radius));
  }
}


Emitter.prototype = {
  draw: function() {
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.beginPath();
    ctx.arc(this.position.x, this.position.y, this.radius, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();    
  },
  update: function() {  
   for(var i=0; i< this.count; i++) {
     this.particles[i].update();
   }
    this.draw(); 
  }
}


var emitter = new Emitter(canvas.width/2, canvas.height/2);

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  emitter.update();
  requestAnimFrame(loop);
}

loop();

body{background:#000;}

 <canvas id="particle"></canvas>

Answer 1

尽可能避免半透明。

使用Alpha绘画是CPU的杀手,，请避免使用纯色来尽可能地融合：

// Global Animation Setting
window.requestAnimFrame = 
  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function(callback) {
    window.setTimeout(callback, 1000/60);
};

// Global Canvas Setting
var canvas = document.getElementById('particle');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


// Particles Around the Parent
function Particle(x, y, distance) {
  this.angle = Math.random() * 2 * Math.PI;
  this.radius = Math.random() ; 
  this.opacity =  (Math.random()*5 + 2)/10;
  // convert to solid color '#nnnnnn'
  this.color = '#' + Math.floor((this.opacity * 255)).toString(16).padStart(2, 0).repeat(3);
  this.distance = (1/this.opacity)*distance;
  this.speed = this.distance*0.00003;
  
  this.position = {
    x: x + this.distance * Math.cos(this.angle),
    y: y + this.distance * Math.sin(this.angle)
  };
  
  this.draw = function() {
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(this.position.x, this.position.y, this.radius, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();
  }
  this.update = function() {
    this.angle += this.speed; 
    this.position = {
      x: x + this.distance * Math.cos(this.angle),
      y: y + this.distance * Math.sin(this.angle)
    };
    this.draw();
  }
}

function Emitter(x, y) {
  this.position = { x: x, y: y};
  this.radius = 30;
  this.count = 3000;
  this.particles = [];
  
  for(var i=0; i< this.count; i ++ ){
    this.particles.push(new Particle(this.position.x, this.position.y, this.radius));
  }
}


Emitter.prototype = {
  draw: function() {
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.beginPath();
    ctx.arc(this.position.x, this.position.y, this.radius, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();    
  },
  update: function() {  
   for(var i=0; i< this.count; i++) {
     this.particles[i].update();
   }
    this.draw(); 
  }
}


var emitter = new Emitter(canvas.width/2, canvas.height/2);

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  emitter.update();
  requestAnimFrame(loop);
}

loop();

body{background:#000;}

<canvas id="particle"></canvas>

但这还不够，

尽可能避免绘画。

在画布上进行绘制操作的速度确实很慢（与非绘制操作相比），应尽可能避免。为此，您可以按颜色对粒子进行排序，并按单个Path对象的堆栈来绘制它们，但这要求我们将opacity值四舍五入（在 solidifying 颜色时完成）。

// Global Animation Setting
window.requestAnimFrame = 
  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function(callback) {
    window.setTimeout(callback, 1000/60);
};

// Global Canvas Setting
var canvas = document.getElementById('particle');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


// Particles Around the Parent
function Particle(x, y, distance) {
  this.angle = Math.random() * 2 * Math.PI;
  this.radius = Math.random() ; 
  this.opacity =  (Math.random()*5 + 2)/10;
  // convert to solid color '#nnnnnn'
  this.color = '#' + Math.floor((this.opacity * 255)).toString(16).padStart(2, 0).repeat(3);
  this.distance = (1/this.opacity)*distance;
  this.speed = this.distance*0.00003;
  
  this.position = {
    x: x + this.distance * Math.cos(this.angle),
    y: y + this.distance * Math.sin(this.angle)
  };
  
  this.draw = function() {
    // here we remove everything but the 'arc' operation and a moveTo
    // no paint
    ctx.moveTo(this.position.x + this.radius, this.position.y);
    ctx.arc(this.position.x, this.position.y, this.radius, 0, Math.PI*2, false);
  }
  this.update = function() {
    this.angle += this.speed; 
    this.position = {
      x: x + this.distance * Math.cos(this.angle),
      y: y + this.distance * Math.sin(this.angle)
    };
    // 'update' should not 'draw'
//    this.draw();
  }
}

function Emitter(x, y) {
  this.position = { x: x, y: y};
  this.radius = 30;
  this.count = 3000;
  this.particles = [];
  
  for(var i=0; i< this.count; i ++ ){
    this.particles.push(new Particle(this.position.x, this.position.y, this.radius));
  }
  // sort our particles by color (opacity = color)
  this.particles.sort(function(a, b) {
    return a.opacity - b.opacity;
  });
}


Emitter.prototype = {
  draw: function() {
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.beginPath();
    ctx.arc(this.position.x, this.position.y, this.radius, 0, Math.PI*2, false);
    ctx.fill();
    // draw our particles in batches
    var particle, color;
    ctx.beginPath();
    for(var i=0; i<this.count; i++) {
      particle = this.particles[i];
      if(color !== particle.color) {
        ctx.fill();
        ctx.beginPath();
        ctx.fillStyle = color = particle.color;
      }
      particle.draw();
    }
    ctx.fill(); // fill the last batch
    
    
  },
  update: function() {  
   for(var i=0; i< this.count; i++) {
     this.particles[i].update();
   }
    this.draw(); 
  }
}


var emitter = new Emitter(canvas.width/2, canvas.height/2);

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  emitter.update();
  requestAnimFrame(loop);
}

loop();

body{background:#000;}

<canvas id="particle"></canvas>

那更好，但还不完美...

最后，要对自己的动画更加聪明。

在动画中，不透明度定义距离。也就是说，距离中心较远的粒子是最透明的粒子。这恰好定义了径向渐变。

因此，我们可以将涂漆操作减少到两次。是的，使用径向渐变和一点点合成，只有两种涂料可以绘制3000个粒子，我们可以一次绘制 all 粒子，然后将渐变作为蒙版应用它的颜色只有在已经画过东西的地方。我们甚至可以保持透明度。

// Global Animation Setting
window.requestAnimFrame = 
  window.requestAnimationFrame ||
  window.webkitRequestAnimationFrame ||
  window.mozRequestAnimationFrame ||
  window.oRequestAnimationFrame ||
  window.msRequestAnimationFrame ||
  function(callback) {
    window.setTimeout(callback, 1000/60);
};

// Global Canvas Setting
var canvas = document.getElementById('particle');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;


// Particles Around the Parent
function Particle(x, y, distance) {
  this.angle = Math.random() * 2 * Math.PI;
  this.radius = Math.random() ; 
  this.opacity =  (Math.random()*5 + 2)/10;
  this.distance = (1/this.opacity)*distance;
  this.speed = this.distance*0.00003;
  
  this.position = {
    x: x + this.distance * Math.cos(this.angle),
    y: y + this.distance * Math.sin(this.angle)
  };
  
  this.draw = function() {
    // still no paint here
    ctx.moveTo(this.position.x + this.radius, this.position.y);
    ctx.arc(this.position.x, this.position.y, this.radius, 0, Math.PI*2, false);
  }
  this.update = function() {
    this.angle += this.speed; 
    this.position = {
      x: x + this.distance * Math.cos(this.angle),
      y: y + this.distance * Math.sin(this.angle)
    };
    this.draw();
  }
}

function Emitter(x, y) {
  this.position = { x: x, y: y};
  this.radius = 30;
  this.count = 3000;
  this.particles = [];
  
  for(var i=0; i< this.count; i ++ ){
    this.particles.push(new Particle(this.position.x, this.position.y, this.radius));
  }
  // a radial gradient that we will use as mask
  // in particle.constructor
  // opacities go from 0.2 to 0.7
  // with a distance range of [radius, 1 / 0.2 * this.radius]
  this.grad = ctx.createRadialGradient(x, y, this.radius, x, y, 1 / 0.2 * this.radius);
  this.grad.addColorStop(0, 'rgba(255,255,255,0.7)');
  this.grad.addColorStop(1, 'rgba(255,255,255,0.2)');
}


Emitter.prototype = {
  draw: function() {
    ctx.fillStyle = "rgba(0,0,0,1)";
    ctx.beginPath();
    ctx.arc(this.position.x, this.position.y, this.radius, 0, Math.PI*2, false);
    ctx.fill();
    ctx.closePath();    
  },
  update: function() {
   ctx.beginPath(); // one Path
   ctx.fillStyle = 'black'; // a solid color
   for(var i=0; i< this.count; i++) {
     this.particles[i].update();
   }
   ctx.fill(); // one paint
   // prepare the composite operation
   ctx.globalCompositeOperation = 'source-in';
   ctx.fillStyle = this.grad; // our gradient
   ctx.fillRect(0,0,canvas.width, canvas.height); // cover the whole canvas
   // reset for next paints (center arc and next frame's clearRect)
   ctx.globalCompositeOperation = 'source-over';
   this.draw(); 
  }
}

var emitter = new Emitter(canvas.width/2, canvas.height/2);

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  emitter.update();
  requestAnimFrame(loop);
}

loop();

body{background:#000;}

<canvas id="particle"></canvas>