为什么这个画布在不同浏览器中的反应不同

Question

I was looking through codepen and found this nice little canvas particle effect:

/**
 * 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 . Why does it work fine in Chrome, no color in Firefox, look + run terrible in internet explorer, and is there any way to fix that? I made sure all 3 browsers were running latest update.

Answer 1

Creating a gradient is an operation you should avoid in a frequently called loop. Here i think this is the reason why Edge does not make it.
But even in FF/Chrome, you'll have much better performances by creating the gradient only once then re-use it.
How would you do it ?

1) create normalized radial gradients, meaning a centered gradient, with a radius of 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) when you draw, translate and scale so that you are drawing at 0,0 with a radius of 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();
}

Now a few performance tips :
• (also for readablity) : cache your code : when you wrote several times particles[i] , it's time to cache it into aParticle , for instance.
• do not use rgba, rather use globalAlpha, you'll avoid costly string operations + color conversions.
• Store the color index rather than the color for each particle.
• do not access the DOM : store the widt and height of the canvas.
• Use requestAnimationFrame to animate.
• trick : convert the 'rgb(...)' strings using the context just by writing :

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

A few Rq :
• do not draw in init or reset.
• render is better called resize.
• you stroke before the beginPath, so you actually stroke the previous particle each time.
• you forgot to bind your onResize handler + hook only once.

You can see those changes and some others here, by profiling i saw cpu use dropped from 25% to 15%... why not !

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

Answer 2

In FF the problem is that:

In the blurry if, change these two lines:

grd.addColorStop(1.000, particle[i].color);
grd.addColorStop(0.000, 'rgba(34, 34, 34, 0)');

To:

grd.addColorStop(0.000, 'rgba(34, 34, 34, 0)');
grd.addColorStop(1.000, particle[i].color);

In EDGE the problem is the blurry code too, if you set the blurry "false" all animation is fluid. I try to solve it if I can...