JavaScriptの巨大なメモリリーク

Question

私はキャンバス要素に取り組んでいます。単純なグラフィックス要素を追加すると思っていましたが、何らかの理由でfpsを停止させてしまいました。それらがなければ、それの60fpsの、彼らとそれが実行中の分以内に3〜4 fpsに遅くなる：私は間違って

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

何をしているのですか？

Answer 1

アニメーションは、それぞれの新しいアニメーションループ

@DanielBengtsson、はい、あなたが発見したとして、にstrokeRectを使用すると遅くなります。

また、ctx.rectの前にctx.beginPathを追加することもできます。何が起こっているのは、前のすべてのrectが最後のbeginPathから再描画されているため、アニメーション化するときに何百ものrectを描画しているということです。

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

背景パターンを繰り返す - イメージが完全に

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>