html5 canvas實現簡單的雙緩衝

在HTML5畫布上有很多有趣的東西，請求動畫框架和用JavaScript製作動畫，今天的這篇文章給大家分享的內容是關於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
    })();

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

這篇文章到這裡就全部結束了，更多精彩內容大家可以關注php中文網相關影片教學專欄！ ！ ！

以上是html5 canvas實現簡單的雙緩衝的詳細內容。更多資訊請關注PHP中文網其他相關文章！