Question

我正在通过codepen查找并发现了这个漂亮的小画布粒子效果：

/**
 * 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：存储画布的宽度和高度 •使用requestAnimationFrame进行动画制作 •trick：仅使用上下文转换'rgb（...）'字符串：

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

一些Rq：
•不要在初始化或重置时绘制 •渲染最好称为调整大小。
•您在beginPath之前进行描边，因此每次实际描绘之前的粒子 •您忘记仅绑定onResize处理程序+钩子一次。

你可以在这里看到这些变化和其他一些变化，通过剖析我看到cpu使用率从25％下降到15％......为什么不呢！

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

Answer 2

在FF中，问题是：

在模糊的情况下，改变这两行：

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

要：

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

在EDGE中，问题是模糊的代码，如果你设置模糊＆＃34;假＆＃34;所有的动画都很流畅。如果可以，我会尝试解决它...

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

2 个答案: