首頁 > web前端 > H5教程 > 主體

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

黄舟
發布: 2017-09-21 11:42:13
原創
3697 人瀏覽過

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

#發生狀況

##多出現在高dpi設備,這意味著每平方英寸有更多的像素,例如手機,平板電腦。當然很多高階桌上型電腦也有高解析度高dpi的顯示器。

 

canvas在瀏覽器中的縮放原理

如果沒有設定style那麼就以html的屬性width,height作為尺寸。

如果設定了style中的width、height,那麼以其style設定為最終繪製到瀏覽器的尺寸。

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

canvas的width、height屬性是canvas的後緩衝尺寸,繪製到瀏覽器後會依照目前dpi進行縮放。

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

 

錯誤的解決案例

網路搜尋canvas 模糊,會有兩種解決方法,可能現在都不適合了。

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

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

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

<br>

var ctx = document.createElement("canvas").getContext("2d"),
        dpr = window.devicePixelRatio || 1,
        bsr = ctx.webkitBackingStorePixelRatio ||
              ctx.mozBackingStorePixelRatio ||
              ctx.msBackingStorePixelRatio ||
              ctx.oBackingStorePixelRatio ||
              ctx.backingStorePixelRatio || 1
登入後複製

我在研究時用了動態建立canvas的方法,樣式的width/height乘以縮放比devicePixelRatio得到canvas的屬性width/ height。 <br>

  這不是完美的解決方案,因為在瀏覽器的dpi發生變化時,例如用戶設置,或者從一個高dpi顯示器移動窗口到低dpi顯示器時發生。 (我1080p普通23吋顯示器是1.25倍,平板電腦是2.0倍,之間拖放視窗就會發生)

解決方法

1、動態建立並監視window的onresize事件,根據devicePixelRatio重建canvas。 <br>2、動態調整canvas樣式的寬高,同樣監視onresize事件。再配合CanvasRenderingContext2D.scale動態縮放繪製內容的比例。 <br><br>瀏覽器都沒有devicePixelRatio改變的事件,或是dpi改變的事件,如果你知道,請留言。 <br>

 

以上是html5 canvas中繪製字體與圖片以及圖形模糊問題解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!