html5 canvas如何實現簡單的雙緩沖

這篇文章將為大家詳細講解有關html5 canvas如何實現簡單的雙緩沖，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

對于更高級的內容，您可能希望使用畫布，這通常是GPU加速的，并且允許使用window.request.tionFrame進行相當高和穩定的幀速率。（推薦課程：HTML5視頻教程）

如果您需要在畫布上進行雙重緩沖，那么一種流行的方法是創建第二個畫布元素并繪制到那個畫布元素，然后使用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);
    })();

輸入CTX.SAVER（）和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
    })();

盡管名稱很奇怪，但是它只是凍結了上下文的呈現，然后在完成繪圖之后恢復呈現。

關于html5 canvas如何實現簡單的雙緩沖就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。