How to solve the problem of blurry fonts, pictures and graphics drawn on HTML5 canvas

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>

　　这不是完美的解决方案，因为在浏览器的dpi发生变化时，比如用户设置，或者从一个高dpi显示器移动窗口到低dpi显示器时发生。（我1080p普通23寸显示器是1.25倍，平板电脑是2.0倍，之间拖放窗口就会发生）

<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>

The above is the detailed content of How to solve the problem of blurry fonts, pictures and graphics drawn on HTML5 canvas. For more information, please follow other related articles on the PHP Chinese website!