4

繰り返し画像の背景を<canvas>（うん、私は初めてです<canvas>）に描画する方法を調べているときに、2つの方法があることがわかりました。

  1. ループで使用drawImage()してfor、画像を手動で繰り返します<canvas>
  2. を使用してパターンを作成し、そのパターンに'sをcontext.createPattern()設定してから、を使用して、全体にパターンを含む長方形を描画します。<canvas>fillStylefillRect<canvas>

明らかに、私が最初に行ったのは、どちらが速いかを確認するためのJSPerfテストを作成することでした（「PrematureOptimisation™—それは機能します」）。

違いは最近のブラウザで減少し、最新では消えるように見えますがdrawImage()、方法は方法を上回る傾向があるようです。createPattern()

createPattern()しかし、私はその方法がもっと速くなることを期待していました。基本的createPattern()には手動の方法と同じことをすると思いましたdrawImage()が、組み込みの方が速くなります。

createPattern()メソッドが遅い理由はありますか？createPattern()適用された形状全体にパターン画像を繰り返し描画する以外のことはありますか？テストを書くときに間違えたことがありますか？

4

2 に答える 2

4

いくつかのテストの後、反対の結果が得られました。

パフォーマンステストの方法は少し奇妙でした。私はそれを正規化し、javascriptコードをセットアップから準備に移動しました（あるべき場所）

http://jsperf.com/createpattern-vs-drawimage/2

パターンの塗りつぶしは、クローム、IE、Firefox（わずかに）、モバイルクローム（ギャラクシーネクサス）、iPadサファリのルーピーなdrawImageよりも速いようです。

さらに、（パターンでfillRectを使用するなどして）パターンを作成し、それをオフスクリーンキャンバスにキャッシュして、そこから描画するのもほぼ同じくらいの速さです。どちらの方法も、ルー​​プを使用してdrawImageを何度も呼び出すよりも高速である必要があります。この3番目の方法をテストの3番目のスニペットとして追加しました。

さらに、パターンまたはキャッシュされたパターンにどれだけのメリットがあるかは、画像が繰り返される回数が増えるほど劇的に増加するはずです。たとえば、ここを参照してください。

http://jsperf.com/createpattern-vs-drawimage/3

画像を何百回も描画すると、createPatternはdrawimageループよりも100〜200倍効率的になります。

于 2012-09-13T14:17:11.387 に答える
0

私はJavascriptでクロージャとループのネストに頭を悩ませようとして本当にイライラしました-VBの経験が豊富で、楽しい小さなゲームを作るためにJSを使い始めています。

とにかく簡単に言えば、効率のスケールではわかりませんが、これは私にとって仕事をしました：

function body_onload(){
var canvas = document.getElementById('canvas-id');
var context = canvas.getContext('2d');
var width = canvas.width;
var height = canvas.height;
var image = new Image();    
function drawBackground(){
    context.fillStyle=context.createPattern(image, "repeat");;
    context.fillRect(0,0,width,height);
    }
image.src="grass.jpg";
image.onload = drawBackground;

}

私のために初めて働いた。JSだけで新しい画像を作成するのではなく、実際の画像を参照してみても<img>、ここで公開した方法の方が扱いやすいようです。特に画像を変更したい場合は、簡単に行うことができます。

これがより効率的であると確信しています。誰かがその方法を知っているなら、私は聞きたいです！

于 2013-02-17T19:50:56.787 に答える