JavaScript：画布上的内存泄漏（不适用于Chrome）

Question

I'm trying to draw some gradient lines on canvas, using jCanvas plugin and jQuery but my code leads to memory leak in Firefox (reserved RAM increases to the infinity). Internet Explorer deals with RAM usage quite good but whole thing is incredibly slow. Only Google Chrome displays my canvas without lag. Could you tell me what am I doing wrong?

Parts of code:

• declarations:

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

• drawing:

   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, }); } } 

• recalculating values of lines colours

   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

Test if it is better like that:

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