在Canvas clearRect中引起的閃屏如何解決

本篇內容主要講解“在Canvas clearRect中引起的閃屏如何解決”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“在Canvas clearRect中引起的閃屏如何解決”吧!

問題簡介

功能簡介

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
}

到此，相信大家對“在Canvas clearRect中引起的閃屏如何解決”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！