11

drawImageを使用して、SVGファイルの多数のインスタンスをキャンバスに描画しようとしています。ソースとして SVG を使用して 1 つの画像要素を作成し、次にキャンバス上の各インスタンスに drawImage を使用することで、多数のインスタンスがあってもキャンバス内に合成画像を非常に迅速に生成できることを期待していました。

パフォーマンスに関しては、これは Firefox でうまく機能します。約 300 ミリ秒で 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;
4

1 に答える 1

8

スローダウン 1:ソース キャンバスまたは宛先キャンバスのいずれかが RAM にあり、もう一方のキャンバスが GPU にある場合に発生します。

スローダウン 2: src キャンバスと dest キャンバスのサイズが異なる場合に発生する

関連するバグ: http://code.google.com/p/chromium/issues/detail?id=170021

私は同じ問題に気づき、ある空白のキャンバスを別の空白のキャンバスに描画するようにケースを単純化しました。キャンバスが同じサイズの場合は問題にならないようですが、ある時点でパフォーマンスが急降下します。ここにjsprefと私の結果があります:

jspref クロムの結果

255x255 から 100x100 と 260x260 から 100x100 の違いに注目してください。

于 2013-05-23T15:44:29.670 に答える