javascript - 为什么这个 Canvas 在不同的浏览器中 react 不同

Question

我正在查看 codepen，发现了这个漂亮的小 Canvas 粒子效果:

/**
 * Generates random particles using canvas
 * 
 * @class Particles
 * @constructor
 */
function Particles(){
  //particle colors
  this.colors = [
    '255, 255, 255',
    '255, 99, 71',
    '19, 19, 19'
  ]
  //adds gradient to particles on true
  this.blurry = true;
  //adds white border
  this.border = false;
  //particle radius min/max
  this.minRadius = 10; 
  this.maxRadius = 35;
  //particle opacity min/max
  this.minOpacity = .005;
  this.maxOpacity = .5;
  //particle speed min/max
  this.minSpeed = .05;
  this.maxSpeed = .5;
  //frames per second 
  this.fps = 60;
  //number of particles
  this.numParticles = 75;
  //required canvas variables
  this.canvas = document.getElementById('canvas');
  this.ctx = this.canvas.getContext('2d');
}

/**
 * Initializes everything
 * @method init
 */
Particles.prototype.init = function(){
  this.render();
  this.createCircle();
}

/**
 * generates random number between min and max values
 * @param  {number} min value
 * @param  {number} max malue
 * @return {number} random number between min and max
 * @method _rand
 */
Particles.prototype._rand = function(min, max){
  return Math.random() * (max - min) + min;
}

/**
 * Sets canvas size and updates values on resize
 * @method render
 */
Particles.prototype.render = function(){ 
  var self = this,
      wHeight = $(window).height(),
      wWidth = $(window).width();

  self.canvas.width = wWidth;
  self.canvas.height = wHeight;

  $(window).on('resize', self.render);
}

/**
 * Randomly creates particle attributes
 * @method createCircle
 */
Particles.prototype.createCircle = function(){
  var particle = [];

  for (var i = 0; i < this.numParticles; i++) {
    var self = this,
        color = self.colors[~~(self._rand(0, self.colors.length))];

    particle[i] = {
      radius    : self._rand(self.minRadius, self.maxRadius),
      xPos      : self._rand(0, canvas.width),
      yPos      : self._rand(0, canvas.height),
      xVelocity : self._rand(self.minSpeed, self.maxSpeed),
      yVelocity : self._rand(self.minSpeed, self.maxSpeed),
      color     : 'rgba(' + color + ',' + self._rand(self.minOpacity, self.maxOpacity) + ')'
    }

    //once values are determined, draw particle on canvas
    self.draw(particle, i);
  }
  //...and once drawn, animate the particle
  self.animate(particle);
}

/**
 * Draws particles on canvas
 * @param  {array} Particle array from createCircle method
 * @param  {number} i value from createCircle method
 * @method draw
 */
Particles.prototype.draw = function(particle, i){
  var self = this,
      ctx = self.ctx;

  if (self.blurry === true ) {
    //creates gradient if blurry === true
    var grd = ctx.createRadialGradient(particle[i].xPos, particle[i].yPos, particle[i].radius, particle[i].xPos, particle[i].yPos, particle[i].radius/1.25);

    grd.addColorStop(1.000, particle[i].color);
    grd.addColorStop(0.000, 'rgba(34, 34, 34, 0)');
    ctx.fillStyle = grd;
  } else {
    //otherwise sets to solid color w/ opacity value
    ctx.fillStyle = particle[i].color; 
  }

  if (self.border === true) {
    ctx.strokeStyle = '#fff';
    ctx.stroke();
  }

  ctx.beginPath();
  ctx.arc(particle[i].xPos, particle[i].yPos, particle[i].radius, 0, 2 * Math.PI, false);
  ctx.fill();
}

/**
 * Animates particles 
 * @param  {array} particle value from createCircle & draw methods
 * @method animate
 */
Particles.prototype.animate = function(particle){
  var self = this,
          ctx = self.ctx;

  setInterval(function(){
    //clears canvas
    self.clearCanvas();
    //then redraws particles in new positions based on velocity
    for (var i = 0; i < self.numParticles; i++) {
      particle[i].xPos += particle[i].xVelocity;
      particle[i].yPos -= particle[i].yVelocity;

      //if particle goes off screen call reset method to place it offscreen to the left/bottom
      if (particle[i].xPos > self.canvas.width + particle[i].radius || particle[i].yPos > self.canvas.height + particle[i].radius) {
        self.resetParticle(particle, i);
      } else {
        self.draw(particle, i);
      }
    }  
  }, 1000/self.fps); 
}

/**
 * Resets position of particle when it goes off screen
 * @param  {array} particle value from createCircle & draw methods
 * @param  {number} i value from createCircle method
 * @method resetParticle
 */
Particles.prototype.resetParticle = function(particle, i){
  var self = this;

  var random = self._rand(0, 1);

  if (random > .5) { 
    // 50% chance particle comes from left side of window...
    particle[i].xPos = -particle[i].radius;
    particle[i].yPos = self._rand(0, canvas.height);
  } else {
    //... or bottom of window
    particle[i].xPos = self._rand(0, canvas.width);
    particle[i].yPos = canvas.height + particle[i].radius;   
  }
  //redraw particle with new values
  self.draw(particle, i);
}

/**
 * Clears canvas between animation frames
 * @method clearCanvas
 */
Particles.prototype.clearCanvas = function(){
  this.ctx.clearRect(0, 0, canvas.width, canvas.height);
}


// go go go!
var particle = new Particles().init();

http://codepen.io/trhino/pen/JFmiK .为什么它在 Chrome 中工作正常，在 Firefox 中没有颜色，在 Internet Explorer 中看起来+运行很糟糕，有什么办法可以解决这个问题？我确保所有 3 个浏览器都运行最新更新。

Answer 1

创建渐变是您应该避免在经常调用的循环中进行的操作。这里我想这就是Edge没能做到的原因。 但即使在 FF/Chrome 中，只创建一次渐变然后重新使用它也会有更好的性能。
你会怎么做？

1) 创建归一化径向渐变，意思是居中渐变，半径为 1。

// add this in the Particles cttor
( function() {
  var gradients = [], grd = null;
  var colors = this.colors, color=null;
  //
  for (var i=0; color=colors[i]; i++) {      
     var grd = ctx.createRadialGradient(0,0,1, 0,0,1/1.25);
     grd.addColorStop(0.000, 'rgba(34, 34, 34, 0)');
     grd.addColorStop(1.000, color);
     gradients.push(grd);
  }
  this.colorGradients = gradients;
})();

2) 当您绘制、平移和缩放时，您在 0,0 处绘制，半径为 1:

var thisParticle = particles[i];
//
if (this.blurry) {
  ctx.save();
  ctx.translate(thisParticle.xPos, thisParticle.yPos);
  ctx.scale(thisParticle.radius, thisParticle.radius);
  ctx.beginPath();
  ctx.arc(0,0,1,0, 2*Math.PI);
  ctx.fillStyle = this.colorGradients[thisParticle.colorIndex];
  ctx.fill();
  ctx.restore();
}

现在有一些性能提示:
•(也是为了可读性):缓存你的代码:当你多次编写particles[i]时，是时候将它缓存到aParticle中了，例如。
• 不要使用 rgba，而是使用 globalAlpha，您将避免昂贵的字符串操作 + 颜色转换。
• 存储颜色索引而不是每个粒子的颜色。
• 不访问 DOM:存储 Canvas 的宽度和高度。
• 使用requestAnimationFrame 制作动画。
• 技巧:使用上下文转换 'rgb(...)' 字符串，只需编写:

ctx.strokeStyle = ...some 'rgb ' color string
var convertedColor = ctx.strokeStyle ;  // converted color is '#...' color string

一些Rq:
• 不要在init 或reset 中绘制。
• 渲染最好称为调整大小。
• 您在 beginPath 之前划过，所以您实际上每次都划过前一个粒子。
• 你忘记绑定(bind)你的 onResize 处理程序 + 只 Hook 一次。

您可以在这里看到这些变化和其他一些变化，通过分析我看到 CPU 使用率从 25% 下降到 15%...为什么不呢!

http://codepen.io/gamealchemist/full/bEWyyY/