首頁  >  文章  >  web前端  >  html5 canvas實現簡單的雙緩衝

html5 canvas實現簡單的雙緩衝

不言
不言原創
2018-11-07 10:16:104782瀏覽

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn