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