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

Question

我正在尝试使用 jCanvas 插件和 jQuery 在画布上绘制一些渐变线，但我的代码导致 Firefox 中的内存泄漏（保留的 RAM 增加到无穷大）。Internet Explorer 可以很好地处理 RAM 使用情况，但整个过程非常缓慢。只有谷歌浏览器可以毫无延迟地显示我的画布。你能告诉我我做错了什么吗？

部分代码：

• 声明：

  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();