Javascript繪製畫布內存泄漏

此腳本無休止地在所有瀏覽器中記憶。我看不出爲什麼！Javascript繪製畫布內存泄漏

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var particles = [], amount = 5; 
var x = 100; var y = 100; 
var W, H; 
var p, gradient; 

//dimensions 
if(window.innerHeight){ 
    W = window.innerWidth, H = window.innerHeight; 
}else{ 
    W = document.documentElement.clientWidth, H = document.documentElement.clientHeight; 
} 
canvas.width = W, canvas.height = H; 


//array voor de meerdere particles 
for(var i=0;i<amount;i++){ 
    particles.push(new create_particle()); 
} 

function create_particle(){ 
    //random positie op canvas 
    this.x = Math.random()*W; 
    this.y = Math.random()*H; 

    //random snelheid 
    this.vx = Math.random()*20-10; 
    this.vy = Math.random()*20-10; 

    //Random kleur 
    var r = Math.random()*255>>0; 
    var g = Math.random()*255>>0; 
    var b = Math.random()*255>>0; 
    this.color = "rgba("+r+", "+g+", "+b+", 0.5)"; 
    this.radius = Math.random()*20+20; 

} 

window.requestAnimFrame = (function(){ 
    return window.requestAnimationFrame  || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame  || 
      window.msRequestAnimationFrame  || 
      function(callback){ 
      window.setTimeout(callback, 1000/60); 
      }; 
})(); 

function draw(){ 
    canvas.width = canvas.width; 
    canvas.height = canvas.height; 
    //achtergrond tekenen 
    //ctx.globalCompositeOperation = "source-over"; 
    //ctx.fillStyle = "rgba(0,0,0,0.5)"; 
    ctx.fillRect(0, 0, W, H); 
    //ctx.globalCompositeOperation = "lighter"; 

    //teken cirkel 
    for(var t=0; t<particles.length;t++){ 
     p = particles[t]; 

     //gradient 
     gradient = ctx.createRadialGradient(p.x,p.y,0,p.x,p.y,p.radius); 
     gradient.addColorStop(0,"white"); 
     gradient.addColorStop(0.4,"white"); 
     gradient.addColorStop(0.4,p.color); 
     gradient.addColorStop(1,"black"); 
     ctx.beginPath(); 
     ctx.fillStyle = gradient; 
     ctx.arc(p.x,p.y,p.radius,Math.PI*2,false) 
     ctx.fill(); 

     //beweeg 
     p.x+=p.vx; 
     p.y+=p.vy; 

     //canvas boundery detect 
     if(p.x < -50)p.x = W+50; 
     if(p.y < -50)p.y=H+50; 
     if(p.x > W+50)p.x = -50; 
     if(p.y > H+50)p.y = -50; 
    } 
} 

(function animloop(){ 
    canvas.width = canvas.width; 
    canvas.height = canvas.height; 
    requestAnimFrame(animloop); 
    draw(); 
})(); 


//resize? 
function resizeCanvas(){ 
    canvas.height = W; 
    canvas.width = H; 
    ctx.fillRect(0, 0, W, H); 
} 
if(window.addEventListener){ 
    window.addEventListener('resize', resizeCanvas, false); 
}else{ 
    window.attachEvent('resize', resizeCanvas); 
}

我試圖改變一些代碼（這也是最終版本），但它仍然泄漏。如果你使用這個腳本並觀看'taskmanager'或瀏覽器內存檢查，你會發現它慢慢地，不斷地吃內存。

編輯：在canvas.height解決方案中添加並移動一些聲明後，腳本仍然泄漏！我必須說，看起來Firefox比Chrome更難泄露！

來源

2012-08-28 Dominique

不要使用任務管理器。使用Firefox和about：內存選項卡，以便獲得準確的報告內存消耗情況。 –

只是一個參考，因爲即使在那裏，它是比可見..但感謝提示:) – Dominique

嗨。你有沒有找到一個答案，除了「有漸變內存泄漏」？ –

嘗試在開始另一套繪圖之前清潔畫布。您可以通過再次設置寬度和高度來清除它。

下面是一些orientative代碼：

function draw() { 
    canvas.width = canvas.width; 
    canvas.height = canvas.height; 

    /* draw */ 
}

來源

2012-08-28 12:18:41 gabitzish

我的第一個結論，當我直接嘗試這個，是，這不是解決方案。:( – Dominique

您有：

canvas.width = canvas.width; 
    canvas.height = canvas.height;

我猜這不一樣clearRect ......但可以肯定的嘗試這也太：

function draw(){ 

    ctx.clearRect (0 , 0 , canvas.width , canvas.height); 

    /* draw */ 
}

看看有沒有變化。

來源

2013-01-17 06:43:16 Sir

我的猜測是你create_particle功能可以泄漏，但林不知道，作爲一個想法如何，是創建一個INTERAL對象，而不是使用this

function create_particle(){ 
    return { 
    x: Math.random()*W, 
    y: Math.random()*H, 
    vx: Math.random()*20-10, 
    vy: Math.random()*20-10, 
    r: Math.random()*255>>0, 
    g: Math.random()*255>>0, 
    b: Math.random()*255>>0, 
    color: "rgba("+r+", "+g+", "+b+", 0.5)", 
    radius: Math.random()*20+20, 
    }; 
}

林不知道如果這是問題，但它似乎是我能真正想到的那種有點奇怪的東西，

來源

2014-02-25 04:10:56 Mouseroot

Javascript繪製畫布內存泄漏

回答

相關問題