Riesiges Speicherleck in Javascript

Ich arbeite an einem Canvas-Element, und ich dachte, ich würde einige einfache Grafikelemente hinzufügen, aber aus irgendeinem Grund mahlen sie die fps zum Stillstand. Ohne sie ist es 60fps, mit ihnen es innerhalb einer Minute davon bis auf 3-4 fps verlangsamt läuft:Riesiges Speicherleck in Javascript

ctx.rect(0, 0, cnv.width, cnv.height); 
ctx.fillStyle = ctx.createPattern(albImg[8], "repeat"); 
ctx.fill(); 

ctx.lineWidth="1"; 
ctx.strokeStyle="#5d92de"; 
ctx.rect(173.5,638.5,623,98); 
ctx.stroke();

Was mache ich falsch?

Quelle

2016-05-24 Daniel Bengtsson

was sind die Bildeigenschaften von albImg [8]? ist es riesig? –

Warum erstellen Sie ein neues Muster für jeden Frame? Das kann nicht schnell sein. – ssube

yeah, du hast Recht, ich sollte wahrscheinlich das Muster in einem anderen Kontext statt und dann verwenden Sie das Ssube: Nein, es ist ein kleines Symbol - 358 Bytes. Der komische Teil ist, dass, selbst wenn ich die Top 3 Zeilen auskommentiere, es immer noch mit den verbleibenden 4 Zeilen zum Stillstand kommt - es dauert nur ein bisschen länger, was wirklich komisch ist. mit allen 7 Zeilen entfernt der Rest der Leinwand läuft gut für Stunden ohne einen Sprung in fps. –

Animation, verlangsamt sich mit jeder neuen Animationsschleife

@DanielBengtsson, Ja, wie Sie entdeckt haben, strokeRect verwenden.

Alternativ können Sie ctx.beginPath vor ctx.rect hinzufügen. Was passiert ist, dass alle vorherigen Retrakte seit dem letzten beginPath neu gezeichnet werden, so dass du wirklich Hunderte von Rekten zeichnest, während du animierst.

// alternative with beginPath so previous rects will not redraw and 
//  cause slowdowns. 
ctx.lineWidth="1"; 
ctx.strokeStyle="#5d92de"; 
ctx.beginPath(); 
ctx.rect(173.5,638.5,623,98); 
ctx.stroke();

Repeating Background Pattern - warten Sie auf das Bild vollständig geladen werden, bevor versucht, es zu verwenden

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var cw = canvas.width; 
 
var ch = canvas.height; 
 

 
var img = new Image(); 
 
img.onload = start; 
 
img.src = "https://dl.dropboxusercontent.com/u/139992952/multple/emoticon1.png"; 
 

 
function start() { 
 
    ctx.fillStyle = ctx.createPattern(img, "repeat"); 
 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
 
}

#canvas{border:1px solid red; margin:0 auto; }

<canvas id="canvas" width=300 height=300></canvas>

Quelle

2016-05-24 22:39:06 markE

Antwort

Verwandte Themen