建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下html5 canvas中繪制字體與圖片以及圖形模糊問題如何解決，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
html5 canvas 繪制字體、圖片與圖形模糊問題
發(fā)生情況
多出現(xiàn)在高dpi設(shè)備，這意味著每平方英寸有更多的像素，如手機，平板電腦。當(dāng)然很多高端臺式電腦也有高分辨率高dpi的顯示器。
canvas在瀏覽器中的縮放原理
如果沒有設(shè)置style那么就以html的屬性width，height作為尺寸。
如果設(shè)置了style中的width、height，那么以其style設(shè)置為最終繪制到瀏覽器的尺寸。
也就是說，屬性中的寬高并不代表實際寬高，所以高dpi下會放大canvas，導(dǎo)致模糊。
canvas的width、height屬性是canvas的后緩沖尺寸，繪制到瀏覽器后會根據(jù)當(dāng)前dpi進行縮放。
devicePixelRatio(window成員)保存了在高dpi狀態(tài)下屬性width/height被放大的比例。
錯誤的解決案例
網(wǎng)上搜索canvas 模糊，會有兩種解決方法，可能現(xiàn)在都不適合了。
一個是CanvasRenderingContext2D.translate(0.5,0.5);
這個其實是在3D繪圖領(lǐng)域常用的，用于處理像素偏移，canvas的2d context已經(jīng)處理了這方面的問題。
另一個是backingStorePixelRatio，你會看到類似下面這樣的代碼，這個backingStorePixelRatio已經(jīng)在新瀏覽器中被去掉了，我試過chrome與edge都已經(jīng)不存在了。
var ctx = document.createElement("canvas").getContext("2d"),
dpr = window.devicePixelRatio || 1,
bsr = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1我在研究時用了動態(tài)創(chuàng)建canvas的方法，樣式的width/height乘以縮放比devicePixelRatio得到canvas的屬性width/height。
這不是完美的解決方案，因為在瀏覽器的dpi發(fā)生變化時，比如用戶設(shè)置，或者從一個高dpi顯示器移動窗口到低dpi顯示器時發(fā)生。（我1080p普通23寸顯示器是1.25倍，平板電腦是2.0倍，之間拖放窗口就會發(fā)生）
解決方法
1、動態(tài)創(chuàng)建并監(jiān)視window的onresize事件，根據(jù)devicePixelRatio重建canvas。
2、動態(tài)調(diào)整canvas樣式的寬高，同樣監(jiān)視onresize事件。再配合CanvasRenderingContext2D.scale動態(tài)縮放繪制內(nèi)容的比例。
看完了這篇文章，相信你對html5 canvas中繪制字體與圖片以及圖形模糊問題如何解決有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
當(dāng)前題目：html5canvas中繪制字體與圖片以及圖形模糊問題如何解決-創(chuàng)新互聯(lián)
URL鏈接：http://www.ef60e0e.cn/article/ccogcj.html
