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

創(chuàng)新互聯(lián)公司十多年專(zhuān)注成都高端網(wǎng)站建設(shè)按需設(shè)計(jì)服務(wù),為客戶(hù)提供專(zhuān)業(yè)的成都網(wǎng)站制作,成都網(wǎng)頁(yè)設(shè)計(jì),成都網(wǎng)站設(shè)計(jì)服務(wù);創(chuàng)新互聯(lián)公司服務(wù)內(nèi)容包含成都網(wǎng)站建設(shè),成都小程序開(kāi)發(fā),軟件開(kāi)發(fā),網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣,網(wǎng)絡(luò)運(yùn)營(yíng)服務(wù)及企業(yè)形象設(shè)計(jì);創(chuàng)新互聯(lián)公司擁有眾多專(zhuān)業(yè)的高端網(wǎng)站制作開(kāi)發(fā)團(tuán)隊(duì),資深的高端網(wǎng)頁(yè)設(shè)計(jì)團(tuán)隊(duì)及經(jīng)驗(yàn)豐富的架構(gòu)師高端網(wǎng)站策劃團(tuán)隊(duì);我們始終堅(jiān)持從客戶(hù)的角度出發(fā),為客戶(hù)量身訂造網(wǎng)絡(luò)營(yíng)銷(xiāo)方案，解決網(wǎng)絡(luò)營(yíng)銷(xiāo)疑問(wèn)。

用 canvas 做 H5 的時(shí)候遇到了閃屏問(wèn)題。閃爍效果如下圖：

問(wèn)題簡(jiǎn)介

功能簡(jiǎn)介

H5 該部分的功能為：通過(guò)點(diǎn)擊二級(jí)菜單，切換圖片的遮罩或者更換背景。

因?yàn)楣δ芎?jiǎn)單，所以用了原生 canvas 實(shí)現(xiàn)這個(gè)功能。但在使用clearRect 清除畫(huà)布的時(shí)候會(huì)出現(xiàn)閃爍的情況。

代碼實(shí)現(xiàn)（問(wèn)題代碼）

以下代碼即為出現(xiàn)閃屏的關(guān)鍵代碼，省略了圖片的定義與 onload：

// 點(diǎn)擊二級(jí)菜單后，觸發(fā)該函數(shù)更新畫(huà)布
updateCanvas(){
    const canvas = document.getElementById('canvas'); // 獲取畫(huà)布
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0,0,1448,750); // 清空畫(huà)布
    // 開(kāi)始重繪
    ctx.drawImage(bg,0,0); // 背景
    ... // 省略其他繪制過(guò)程
}

問(wèn)題分析

經(jīng)過(guò)簡(jiǎn)單分析，得出閃屏的原因是clearRect 清除畫(huà)布后，繪制的時(shí)間較長(zhǎng)導(dǎo)致出現(xiàn)閃屏的現(xiàn)象。

什么是雙緩存

來(lái)看一下microsoft 網(wǎng)站中雙緩沖圖形 這篇文章對(duì)雙緩存的解釋?zhuān)?/p>

對(duì)圖形進(jìn)行編程時(shí)出現(xiàn)閃爍是一個(gè)常見(jiàn)問(wèn)題。 需要多個(gè)復(fù)雜畫(huà)圖操作的圖形操作可導(dǎo)致呈現(xiàn)的圖像出現(xiàn)閃爍或具有不可接受的外觀。 為解決這些問(wèn)題，.NET Framework 提供了雙緩沖功能。

雙緩沖使用內(nèi)容緩沖來(lái)解決與多個(gè)畫(huà)圖操作相關(guān)的閃爍問(wèn)題。 啟用雙緩沖后，所有畫(huà)圖操作會(huì)首先呈現(xiàn)到內(nèi)存緩沖而不是屏幕上的繪圖圖面。 所有畫(huà)圖操作完成后，內(nèi)存緩沖會(huì)直接復(fù)制到與之關(guān)聯(lián)的繪圖圖面。 由于屏幕上僅執(zhí)行一個(gè)圖形操作，因此與復(fù)雜畫(huà)圖操作相關(guān)的圖像閃爍可得以消除。

使用雙緩存解決問(wèn)題

以上引用，簡(jiǎn)單來(lái)說(shuō)，主要問(wèn)題就是繪制時(shí)間較長(zhǎng)導(dǎo)致了閃屏，解決方法就是新建一個(gè) canvas 作為緩存 canvas ，通過(guò)緩存 canvas 完成繪制過(guò)程，繪制完成后，直接將緩存 canvas 復(fù)制到原來(lái)的 canvas，這樣就可以解決繪制時(shí)間過(guò)長(zhǎng)導(dǎo)致的閃屏問(wèn)題。

代碼實(shí)現(xiàn)

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

updateCanvas(){
    const canvas = document.getElementById('canvas'); // 獲取頁(yè)面中的 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è)置寬高

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

效果驗(yàn)收

可以很明顯的看到閃屏問(wèn)題解決了！

總結(jié)

重繪畫(huà)布的時(shí)候，我們需要使用clearRect 來(lái)清空畫(huà)布，此時(shí)的畫(huà)布是空的，開(kāi)始重繪后，如果內(nèi)容較多，時(shí)間也就相應(yīng)的增加，因此視覺(jué)出現(xiàn)了空檔期，我們就看到了閃屏的情況；

解決閃屏，其實(shí)就是怎么解決繪制時(shí)間較長(zhǎng)的問(wèn)題；

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

以上是“如何使用雙緩存解決Canvas clearRect引起的閃屏問(wèn)題”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)題目：如何使用雙緩存解決CanvasclearRect引起的閃屏問(wèn)題-創(chuàng)新互聯(lián)
文章網(wǎng)址：http://www.rwnh.cn/article28/ehojp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、企業(yè)網(wǎng)站制作、Google、定制開(kāi)發(fā)、商城網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)