drawImageを使用してSVGファイルのインスタンスを多数キャンバスに描画しようとしています。 SVGをソースとして使用して単一のイメージ要素を作成し、キャンバス上の各インスタンスに対してdrawImageを使用することで、多数のインスタンスがあっても非常に素早くキャンバス内に合成イメージを生成できることを期待していました。drawImageをCanvasで使用すると、Chromeでの処理が非常に遅くなる
これはFirefoxでもうまくいきます。約300msで60,000インスタンスを描画できます。しかし、Chromeでは非常に遅い:16,000インスタンスが5秒以上かかる。私はjsfiddleにコードのバージョンを入れました。これはChromeの問題を示しています。
ここでは、drawImageをどのように呼び出しているかの例があります。キャンバスにはできるだけ多くのサイズxサイズの画像が埋め込まれています。 2番目の隠しキャンバスを使用してすべてのインスタンスをバッファリングし、可視のキャンバスを1回の呼び出しで更新するよう提案しました。しかしそれはパフォーマンスには影響しませんでした。個々のdrawImageコールは依然として不安定に見えます。
何が問題になるのか、それを修正するために何ができるのですか?
svgImg = new Image;
can.width = 1800; can.height = 900;
svgImg.onload = function() {
if (internalSize == size)
return;
internalSize = size;
var timeBefore = new Date().getTime();
var tot = 0;
var canWidth = can.width;
var canHeight = can.height;
for (var x = 0; x < canWidth; x += size) {
for (var y = 0; y < canHeight; y += size) {
ctx.drawImage(svgImg, x, y, size, size);
tot++;
}
}
document.getElementById('count').innerHTML = "Total Count: " + tot;
var timeAfter = new Date().getTime();
};
svgImg.src = "http://www.w3.org/Icons/SVG/svg-logo.svg";
svgImg.width = size;
svgImg.height = size;
これは非常識です。このテストをしてくれてありがとう。 – RadiantHex
これは私にとっても当てはまりました。キャンバスを正確に同じサイズにするまで、私は膨大な量のラグを見ました。 –
バグトラッカーはバグが修正されていると言っていますが、キャンバスのサイズが違っていても減速しているというサムの指摘はまだあります。私はこれを反映するために答えを更新しました。 – Charlie