如何使用雙緩存解決Canvas clearRect引起的閃屏問題

小編給大家分享一下如何使用雙緩存解決Canvas clearRect引起的閃屏問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

用 canvas 做 H5 的時候遇到了閃屏問題。閃爍效果如下圖：

問題簡介

功能簡介

H5 該部分的功能為：通過點擊二級菜單，切換圖片的遮罩或者更換背景。

因為功能簡單，所以用了原生 canvas 實現這個功能。但在使用 clearRect 清除畫布的時候會出現閃爍的情況。

代碼實現（問題代碼）

以下代碼即為出現閃屏的關鍵代碼，省略了圖片的定義與 onload：

// 點擊二級菜單后，觸發該函數更新畫布
updateCanvas(){
    const canvas = document.getElementById('canvas'); // 獲取畫布
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,1448,750); // 清空畫布
    // 開始重繪
    ctx.drawImage(bg,0,0); // 背景
    ... // 省略其他繪制過程
}

問題分析

經過簡單分析，得出閃屏的原因是 clearRect 清除畫布后，繪制的時間較長導致出現閃屏的現象。

什么是雙緩存

來看一下microsoft 網站中雙緩沖圖形 這篇文章對雙緩存的解釋：

對圖形進行編程時出現閃爍是一個常見問題。 需要多個復雜畫圖操作的圖形操作可導致呈現的圖像出現閃爍或具有不可接受的外觀。 為解決這些問題，.NET Framework 提供了雙緩沖功能。

雙緩沖使用內容緩沖來解決與多個畫圖操作相關的閃爍問題。 啟用雙緩沖后，所有畫圖操作會首先呈現到內存緩沖而不是屏幕上的繪圖圖面。 所有畫圖操作完成后，內存緩沖會直接復制到與之關聯的繪圖圖面。 由于屏幕上僅執行一個圖形操作，因此與復雜畫圖操作相關的圖像閃爍可得以消除。

使用雙緩存解決問題

以上引用，簡單來說，主要問題就是繪制時間較長導致了閃屏，解決方法就是新建一個 canvas 作為 緩存 canvas ，通過 緩存 canvas 完成繪制過程，繪制完成后，直接將 緩存 canvas 復制到原來的 canvas，這樣就可以解決繪制時間過長導致的閃屏問題。

代碼實現

以下代碼即為關鍵代碼，省略了圖片的定義與 onload：

updateCanvas(){
    const canvas = document.getElementById('canvas'); // 獲取頁面中的 canvas
    const ctx = canvas.getContext('2d');
    
    const tempCanvas = document.createElement('canvas'); // 新建一個 canvas 作為緩存 canvas
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = 1448; tempCanvas.height = 750; // 設置寬高

    // 開始繪制
    tempCtx.drawImage(bg,0,0); // 背景
    ... // 省略其他繪制過程
    
    // 緩存 canvas 繪制完成
    
    ctx.clearRect(0,0,1448,750); // 清空舊 canvas
    ctx.drawImage(tempCanvas,0,0); // 將緩存 canvas 復制到舊的 canvas
}

效果驗收

可以很明顯的看到閃屏問題解決了！

總結

重繪畫布的時候，我們需要使用 clearRect 來清空畫布，此時的畫布是空的，開始重繪后，如果內容較多，時間也就相應的增加，因此視覺出現了空檔期，我們就看到了閃屏的情況；

解決閃屏，其實就是怎么解決繪制時間較長的問題；

這里參考了圖形圖象處理編程中 雙緩存 的概念，將繪制過程交給了 緩存 canvas ，這樣頁面中的 canvas 就省去了繪制過程，而 緩存 canvas 并沒有添加到頁面，所以我們就看不到繪制過程，也就解決了閃屏的問題。

以上是“如何使用雙緩存解決Canvas clearRect引起的閃屏問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！