背景キャンバスと通常キャンバスのパフォーマンス

しばらく前のWebkit(そしてSafari)は要素のCSSキャンバスの背景をサポートし始めました(出典: http://www.webkit.org/blog/176/css-canvas-drawing/ )。

これは、あなたがDIV(例えば)にキャンバスタグを挿入する必要はなく、DIVのバックグラウンドに直接フックするだけで、ゲームやマルチメディアの作成を大幅に簡素化することができます。おそらくこのような何か:

<div id="gameview"
style="background: -webkit-canvas(myscreen); width: 320px; height: 480px;">
</div>

<script>
    var target = document.getElementById("gameview");
    var wd = target.clientWidth;
    var hd = target.clientHeight;
    var context =  document.getCSSCanvasContext("2d", "myscreen", wd, hd);
    /* draw stuff here */
</script>

私はこれに関係するスピード違反があるのだろうかと疑問に思っていたのですか?理論的には、キャンバスタグに描画するよりも、特に対象の要素が空の場合は、背景のキャンバスに描画する方が速いはずです。

高速デモやゲームでこれをテストした人はいますか?

9
私はちょうどそれをテストした。背景ビューは「ライブ」ではないことが判明しました。これは一度レンダリングされ、単に背景として使用されます。再描画を強制する唯一の方法は、コンテキストのサイズを変更することです。要するに、これはゲームには使用できません。
追加された 著者 Jon Lennart Aasenden,
「ライブ」とは、グラフィックスコンテキストが画面外に(ブラウザコードによって内部的に)描画されず、ブラウザのメインデバイスコンテキストにブリッジされることを意味します。
追加された 著者 Jon Lennart Aasenden,
バックグラウンドの canvas は、通常のように "生きている"ようです。 スネークゲーム(Chromeでテスト済み)を参照してください。
追加された 著者 katspaugh,

2 答え

私のテスト(また、逆の順序で)、元の canvas 要素は、バックグラウンドの canvas よりもわずかながらは一貫して遅くなります。

クロム17はチェス盤を10000回引いています:

  • 背景キャンバス〜470 ms
  • canvas 要素の〜520ms

Safari 5も同様のダイナミクスを示します。

反復回数を100000に設定してみてください。結果は上記と一貫しているはずです。


半年後に更新

1つのプロジェクトでバックグラウンドキャンバスアプローチを試みました(マイナーな最適化の試みとして)、その結果は期待とは劇的に逆でした。全体が( div と背景キャンバスの2つのレイヤーと、通常のキャンバスレイヤーの2つのレイヤー)、少し遅いになりました。実際、バックグラウンドキャンバスを導入したとき、アプリは地獄のように遅くなりました。 Chromeでテスト済み21。

すべての状況で、バックグラウンドキャンバスがより速くなることを保証することは間違いありません

3
追加された
私はそれが即座に再描画を強制しないためだと思います。オフスクリーンのDIB(デバイスに依存しないビットマップ)は当然のことであり、ウィンドウの無効化の一部としてのみ更新されます。したがって、X回の回数を描画すると、ウィンドウが迅速に発生するため、ウィンドウが更新されなくなります。
追加された 著者 Jon Lennart Aasenden,
@AshleysBrainは、バックグラウンドがDOMツリーの一部ではないため、推測します。また、コンテナのサイズを変更するとビットマップを拡大縮小しません。 C ++を知っている人なら、WebKitのソースを見ているかもしれません。
追加された 著者 katspaugh,
非常に面白い - なぜ背景キャンバスが速いのか?
追加された 著者 AshleysBrain,
test.php:11Regular Canvas 606
test.php:20Background Canvas 449
test.php:11Regular Canvas 516
test.php:20Background Canvas 483

レギュラーは、Linuxのdebianのchromeに関する私のテストで背景のキャンバスと比較して性能が劣っているようだが、使用されるコードをheresする( http: /jsfiddle.net/hDPVr/

<div style="width:300; height:200; background: -webkit-canvas(test_canvas); "></div>
</div>

<script type="text/javascript">
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var regular_timer = new Date().getTime() ;
    for( var i = 0; i<100000; i++ ){
    context.fillRect( 0,0,10,10);
    }
    console.log( 'Regular Canvas', regular_timer - (new Date().getTime()) )



    var context = document.getCSSCanvasContext('2d', 'test_canvas', 300, 200); 
    var background_timer = new Date().getTime() ;
    for( var i = 0; i<100000; i++ ){
    context.fillRect( 0,0,10,10);
    }
    console.log( 'Background Canvas', background_timer - (new Date().getTime()) )

</script>

So the only thing that I did for testing is fillRect, but it's still at least 10% better in some cases

0
追加された
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript