html5 canvas中繪制字體與圖片以及圖形模糊問題如何解決

小編給大家分享一下html5 canvas中繪制字體與圖片以及圖形模糊問題如何解決，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

html5 canvas 繪制字體、圖片與圖形模糊問題

發(fā)生情況

多出現在高dpi設備，這意味著每平方英寸有更多的像素，如手機，平板電腦。當然很多高端臺式電腦也有高分辨率高dpi的顯示器。

canvas在瀏覽器中的縮放原理

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

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

也就是說，屬性中的寬高并不代表實際寬高，所以高dpi下會放大canvas，導致模糊。

canvas的width、height屬性是canvas的后緩沖尺寸，繪制到瀏覽器后會根據當前dpi進行縮放。

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

錯誤的解決案例

網上搜索canvas 模糊，會有兩種解決方法，可能現在都不適合了。

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

　　這個其實是在3D繪圖領域常用的，用于處理像素偏移，canvas的2d context已經處理了這方面的問題。

另一個是backingStorePixelRatio，你會看到類似下面這樣的代碼，這個backingStorePixelRatio已經在新瀏覽器中被去掉了，我試過chrome與edge都已經不存在了。

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ā)生變化時，比如用戶設置，或者從一個高dpi顯示器移動窗口到低dpi顯示器時發(fā)生。（我1080p普通23寸顯示器是1.25倍，平板電腦是2.0倍，之間拖放窗口就會發(fā)生）

解決方法
1、動態(tài)創(chuàng)建并監(jiān)視window的onresize事件，根據devicePixelRatio重建canvas。
2、動態(tài)調整canvas樣式的寬高，同樣監(jiān)視onresize事件。再配合CanvasRenderingContext2D.scale動態(tài)縮放繪制內容的比例。

看完了這篇文章，相信你對html5 canvas中繪制字體與圖片以及圖形模糊問題如何解決有了一定的了解，想了解更多相關知識，歡迎關注億速云行業(yè)資訊頻道，感謝各位的閱讀！