发生情况
多出现在高dpi设备，这意味着每 平方 英寸有更多的像素，如手机，平板 电 脑。当然很多高端 台式电脑 也有高分辨率高dpi的 显示器 。
canvas在浏览器中的缩放原理
如果没有设置style那么就以ht ML 的属性width，h ei ght作为 尺寸 。
如果设置了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已经处理了这方面的问题。
另一个是backing Store PixelRatio，你会看到类似下面这样的代码，这个backingStorePixelRatio已经在新浏览器中被去掉了，我试过ch rom e与 Edge 都已经不存在了。
VAR ctx = document.createElement("canvas").getContext("2d"),
d PR = window.devicePixelRatio || 1,
bsr = ctx. webkit BackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1 我在研究时用了动态创建canvas的方法，样式的width/height乘以缩放比devicePixelRatio得到canvas的属性width/height。
这不是完美的解决 方案 ，因为在浏览器的dpi发生变化时，比如用户设置， 或者 从一个高dpi显示器移动窗口到低dpi显示器时发生。（我1080p普通23寸显示器是1.25倍，平板电脑是2.0倍，之间拖放窗口就会发生）
解决方法
1、动态创建并监视window的onresize事件，根据devicePixelRatio重建canvas。
2、动态 调整 canvas样式的宽高，同样监视onresize事件。再配合CanvasRenderingContext2D.scale动态缩放绘制内容的比例。
浏览器都没有devicePixelRatio 改变 的事件，或者dpi改变的事件，如果你 知道 ，请留言。
以上就是html5 canvas中绘制字体与图片以及图形模糊问题解决的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 html5 canvas中绘制字体与图片以及图形模糊问题解决 全部内容，希望文章能够帮你解决 html5 canvas中绘制字体与图片以及图形模糊问题解决 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5 canvas中绘制字体与图片以及图形模糊问题解决的详细内容...