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都已經不存在了。
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/>
<code><span style="font-size: 14px"><strong><span style="font-family: Microsoft YaHei">解决方法</span></strong></span><br/><span style="font-family: Microsoft YaHei; font-size: 14px">1、动态创建并监视window的onresize事件，根据<span style="font-family: Consolas">devicePixelRatio</span>重建canvas。<br/>2、动态调整canvas样式的宽高，同样监视onresize事件。再配合<span style="font-family: Microsoft YaHei">CanvasRenderingContext2D.scale动态缩放绘制内容的比例。</span><br/></span><span style="font-family: Microsoft YaHei; font-size: 14px">浏览器都没有devicePixelRatio改变的事件，或者dpi改变的事件，如果你知道，请留言。</span><br/></code>
以上是如何解決html5 canvas 繪製字體、圖片與圖形模糊問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
