JavaScript：画布上的内存泄漏（不在Chrome中）

Question

我试图在画布上绘制一些渐变线，使用jCanvas插件和jQuery，但是我的代码导致Firefox中的内存泄漏（保留的RAM增加到无穷大）。 Internet Explorer处理内存使用情况相当不错，但整个事情非常缓慢。只有谷歌浏览器显示我的画布没有滞后。 你能告诉我我做错了什么？的代码

零件：

• 声明：

  var i, i1, i2, p; 
  var r=[], g=[], b=[], a=[]; 
  var gradient=[]; 
  var w=$("body").width(); 
  var w2=Math.floor(w/2), w3=w2-1; 
  var h=$("body").height(); 
  

• 附图中：

  function draw() { 
      $('#bg').clearCanvas(); 
      for (i=0; i<w2; i++) { 
       $('#bg').drawLine({ 
        strokeStyle: gradient[i], 
        strokeWidth: 2, 
        x1: i*2, y1: 0, 
        x2: i*2, y2: 700, 
       }); 
      } 
  } 
  

• 重新计算的线颜色值

  function mixer() { 
  for (i=0; i<w2; i++) { 
      p = Math.random(); 
      if (p<0.997) { 
       i1 = (i>1)?i-1:w3; 
       i2 = (i<w3)?i+1:0; 
       r[i] = Math.floor((r[i1] + r[i2])/2); 
       g[i] = Math.floor((g[i1] + g[i2])/2); 
       b[i] = Math.floor((b[i1] + b[i2])/2); 
      } 
      else { 
       r[i] = Math.floor(Math.random()*180); 
       g[i] = Math.floor(Math.random()*180); 
       b[i] = Math.floor(Math.random()*180); 
      } 
      delete gradient[i]; 
      gradient[i] = $("#bg").createGradient({ 
       x1: 0, y1: 0, 
       x2: 1, y2: 699, 
       c1: '#000', 
       c2: "rgb("+r[i]+","+g[i]+","+b[i]+")", 
       c3: '#000' 
      }); 
  } 
  draw(); 
  } 
  window.setInterval(mixer, 60); 
  

Answer 1

测试，如果是这样的好：

function mixer() { 
    for (i = 0; i < w2; i++) { 
     p = Math.random(); 
     if (p < 0.997) { 
      i1 = (i > 1) ? i - 1 : w3; 
      i2 = (i < w3) ? i + 1 : 0; 
      r[i] = Math.floor((r[i1] + r[i2])/2); 
      g[i] = Math.floor((g[i1] + g[i2])/2); 
      b[i] = Math.floor((b[i1] + b[i2])/2); 
     } else { 
      r[i] = Math.floor(Math.random() * 180); 
      g[i] = Math.floor(Math.random() * 180); 
      b[i] = Math.floor(Math.random() * 180); 
     } 
     delete gradient[i]; 
     gradient[i] = $("#bg").createGradient({ 
      x1: 0, 
      y1: 0, 
      x2: 1, 
      y2: 699, 
      c1: '#000', 
      c2: "rgb(" + r[i] + "," + g[i] + "," + b[i] + ")", 
      c3: '#000' 
     }); 
    } 
    draw(); 
    setTimeout(mixer, 60); 
} 
mixer();