怎么解決html5canvas繪制字體、圖片與圖形模糊問(wèn)題-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)怎么解決html5 canvas 繪制字體、圖片與圖形模糊問(wèn)題的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

成都服務(wù)器托管，創(chuàng)新互聯(lián)提供包括服務(wù)器租用、服務(wù)器托管、帶寬租用、云主機(jī)、機(jī)柜租用、主機(jī)租用托管、CDN網(wǎng)站加速、域名與空間等業(yè)務(wù)的一體化完整服務(wù)。電話咨詢：18982081108

html5 canvas 繪制字體、圖片與圖形模糊問(wèn)題

發(fā)生情況

多出現(xiàn)在高dpi設(shè)備，這意味著每平方英寸有更多的像素，如手機(jī)，平板電腦。當(dāng)然很多高端臺(tái)式電腦也有高分辨率高dpi的顯示器。

canvas在瀏覽器中的縮放原理

如果沒有設(shè)置style那么就以html的屬性width，height作為尺寸。

如果設(shè)置了style中的width、height，那么以其style設(shè)置為最終繪制到瀏覽器的尺寸。

也就是說(shuō)，屬性中的寬高并不代表實(shí)際寬高，所以高dpi下會(huì)放大canvas，導(dǎo)致模糊。

canvas的width、height屬性是canvas的后緩沖尺寸，繪制到瀏覽器后會(huì)根據(jù)當(dāng)前dpi進(jìn)行縮放。

devicePixelRatio(window成員)保存了在高dpi狀態(tài)下屬性width/height被放大的比例。

錯(cuò)誤的解決案例

網(wǎng)上搜索canvas 模糊，會(huì)有兩種解決方法，可能現(xiàn)在都不適合了。

一個(gè)是CanvasRenderingContext2D.translate(0.5,0.5);

這個(gè)其實(shí)是在3D繪圖領(lǐng)域常用的，用于處理像素偏移，canvas的2d context已經(jīng)處理了這方面的問(wèn)題。

另一個(gè)是backingStorePixelRatio，你會(huì)看到類似下面這樣的代碼，這個(gè)backingStorePixelRatio已經(jīng)在新瀏覽器中被去掉了，我試過(guò)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

我在研究時(shí)用了動(dòng)態(tài)創(chuàng)建canvas的方法，樣式的width/height乘以縮放比devicePixelRatio得到canvas的屬性width/height。


這不是完美的解決方案，因?yàn)樵跒g覽器的dpi發(fā)生變化時(shí)，比如用戶設(shè)置，或者從一個(gè)高dpi顯示器移動(dòng)窗口到低dpi顯示器時(shí)發(fā)生。（我1080p普通23寸顯示器是1.25倍，平板電腦是2.0倍，之間拖放窗口就會(huì)發(fā)生）

解決方法
1、動(dòng)態(tài)創(chuàng)建并監(jiān)視window的onresize事件，根據(jù)devicePixelRatio重建canvas。
2、動(dòng)態(tài)調(diào)整canvas樣式的寬高，同樣監(jiān)視onresize事件。再配合CanvasRenderingContext2D.scale動(dòng)態(tài)縮放繪制內(nèi)容的比例。
瀏覽器都沒有devicePixelRatio改變的事件，或者dpi改變的事件，如果你知道，請(qǐng)留言。

感謝各位的閱讀！關(guān)于“怎么解決html5 canvas 繪制字體、圖片與圖形模糊問(wèn)題”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)站名稱：怎么解決html5canvas繪制字體、圖片與圖形模糊問(wèn)題-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)地址：http://muchs.cn/article22/dpicjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站制作、網(wǎng)站排名、微信公眾號(hào)、全網(wǎng)營(yíng)銷推廣、品牌網(wǎng)站設(shè)計(jì)

廣告

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