在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中文網其他相關文章！
