小編給大家分享一下如何使用雙緩存解決Canvas clearRect引起的閃屏問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
用 canvas 做 H5 的時(shí)候遇到了閃屏問題。閃爍效果如下圖：
問題簡介
功能簡介
H5 該部分的功能為：通過點(diǎn)擊二級菜單，切換圖片的遮罩或者更換背景。
因?yàn)楣δ芎唵?，所以用了原?canvas 實(shí)現(xiàn)這個(gè)功能。但在使用clearRect 清除畫布的時(shí)候會(huì)出現(xiàn)閃爍的情況。
代碼實(shí)現(xiàn)（問題代碼）
以下代碼即為出現(xiàn)閃屏的關(guān)鍵代碼，省略了圖片的定義與 onload：
重慶分公司
重慶分公司
// 點(diǎn)擊二級菜單后，觸發(fā)該函數(shù)更新畫布
updateCanvas(){
const canvas = document.getElementById('canvas'); // 獲取畫布
const ctx = canvas.getContext('2d');
ctx.clearRect(0,0,1448,750); // 清空畫布
// 開始重繪
ctx.drawImage(bg,0,0); // 背景
... // 省略其他繪制過程
}問題分析
經(jīng)過簡單分析，得出閃屏的原因是clearRect 清除畫布后，繪制的時(shí)間較長導(dǎo)致出現(xiàn)閃屏的現(xiàn)象。
什么是雙緩存
來看一下microsoft 網(wǎng)站中雙緩沖圖形 這篇文章對雙緩存的解釋：
對圖形進(jìn)行編程時(shí)出現(xiàn)閃爍是一個(gè)常見問題。 需要多個(gè)復(fù)雜畫圖操作的圖形操作可導(dǎo)致呈現(xiàn)的圖像出現(xiàn)閃爍或具有不可接受的外觀。 為解決這些問題，.NET Framework 提供了雙緩沖功能。
雙緩沖使用內(nèi)容緩沖來解決與多個(gè)畫圖操作相關(guān)的閃爍問題。 啟用雙緩沖后，所有畫圖操作會(huì)首先呈現(xiàn)到內(nèi)存緩沖而不是屏幕上的繪圖圖面。 所有畫圖操作完成后，內(nèi)存緩沖會(huì)直接復(fù)制到與之關(guān)聯(lián)的繪圖圖面。 由于屏幕上僅執(zhí)行一個(gè)圖形操作，因此與復(fù)雜畫圖操作相關(guān)的圖像閃爍可得以消除。
使用雙緩存解決問題
以上引用，簡單來說，主要問題就是繪制時(shí)間較長導(dǎo)致了閃屏，解決方法就是新建一個(gè) canvas 作為緩存 canvas ，通過緩存 canvas 完成繪制過程，繪制完成后，直接將緩存 canvas 復(fù)制到原來的 canvas，這樣就可以解決繪制時(shí)間過長導(dǎo)致的閃屏問題。
代碼實(shí)現(xiàn)
以下代碼即為關(guān)鍵代碼，省略了圖片的定義與 onload：
updateCanvas(){
const canvas = document.getElementById('canvas'); // 獲取頁面中的 canvas
const ctx = canvas.getContext('2d');
const tempCanvas = document.createElement('canvas'); // 新建一個(gè) canvas 作為緩存 canvas
const tempCtx = tempCanvas.getContext('2d');
tempCanvas.width = 1448; tempCanvas.height = 750; // 設(shè)置寬高
// 開始繪制
tempCtx.drawImage(bg,0,0); // 背景
... // 省略其他繪制過程
// 緩存 canvas 繪制完成
ctx.clearRect(0,0,1448,750); // 清空舊 canvas
ctx.drawImage(tempCanvas,0,0); // 將緩存 canvas 復(fù)制到舊的 canvas
}效果驗(yàn)收
可以很明顯的看到閃屏問題解決了！
總結(jié)
重繪畫布的時(shí)候，我們需要使用clearRect 來清空畫布，此時(shí)的畫布是空的，開始重繪后，如果內(nèi)容較多，時(shí)間也就相應(yīng)的增加，因此視覺出現(xiàn)了空檔期，我們就看到了閃屏的情況；
解決閃屏，其實(shí)就是怎么解決繪制時(shí)間較長的問題；
這里參考了圖形圖象處理編程中雙緩存 的概念，將繪制過程交給了緩存 canvas ，這樣頁面中的 canvas 就省去了繪制過程，而緩存 canvas 并沒有添加到頁面，所以我們就看不到繪制過程，也就解決了閃屏的問題。
以上是“如何使用雙緩存解決Canvas clearRect引起的閃屏問題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
