HTML5 キャンバスは単純なダブルバッファリングを実装します

HTML5 キャンバスには、アニメーション フレームワークのリクエストや JavaScript でのアニメーションの作成など、興味深いものがたくさんあります。今日の記事では、HTML5 キャンバスでの単純なダブル バッファリングの実装について説明します。必要な方はぜひご覧ください。記事内の方法。

より高度なコンテンツの場合は、キャンバスを使用することをお勧めします。キャンバスは通常、GPU で高速化され、window.request.tionFrame を使用してかなり高い安定したフレーム レートを実現します。 (推奨コース: HTML5 ビデオ チュートリアル )

キャンバス上でダブル バッファーが必要な場合、一般的なアプローチは、2 番目の Canvas 要素を作成し、その Canvas 要素に描画し、その後、drawImage を使用することです。完成したイメージをメイン キャンバスに描画すると、結果は次のようになります。

var primaryCtx = document.getElementById("canvas").getContext("2d");
var secondaryCanvas = document.createElement("canvas"),
      secondaryCtx = secondaryCanvas.getContext("2d");
      (function drawFrame() {
    requestAnimationFrame(drawFrame);
    secondaryCtx.fillStyle = "#f00";
    secondaryCtx.fillRect(10,10,20,20);
    primaryCtx.drawImage(secondaryCanvas);
    })();

Enter CTX.SAVER() and CTX.Rebug()

今日、あることを知りました。よりクリーンな方法で、上記の方法と同じように機能します。

(function drawFrame() {
    requestAnimationFrame(drawFrame);
    primaryCtx.save(); //Freeze redraw
    primaryCtx.fillStyle = "#f00";
    primaryCtx.fillRect(10,10,20,20);
    primaryCtx.restore(); //And now do the redraw
    })();

名前が変わっているにもかかわらず、このメソッドはコンテキストのレンダリングをフリーズするだけで、描画が終了した後にレンダリングを再開します。

この記事はここで終了です。さらに興味深いコンテンツについては、php 中国語 Web サイトの関連する ビデオ チュートリアル 列に注目してください。 ！ ！

以上がHTML5 キャンバスは単純なダブルバッファリングを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。