html5 canvas中绘制字体与图片以及图形模糊问题解决(2)-木庄网络博客

另一个是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。

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

解决方法
1、动态创建并监视window的onresize事件，根据devicePixelRatio重建canvas。
2、动态调整canvas样式的宽高，同样监视onresize事件。再配合CanvasRenderingContext2D.scale动态缩放绘制内容的比例。

浏览器都没有devicePixelRatio改变的事件，或者dpi改变的事件，如果你知道，请留言。

以上就是html5 canvas中绘制字体与图片以及图形模糊问题解决的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

h5里图片中有缝隙应该如何解决

详解html5之pushstate、popstate操作history无刷新改变当前url代码实例

html5游戏《坦克后援队》的示例代码分享

html5 web框架有哪些

canvas 学习 3---画坐标系

npm机制深入理解

html5 解决苹果手机不能自动播放音乐问题的相关技巧

h5实现拖拽排序的代码

html5 高级教程--拖放 api 实现拖放排序

更多相关阅读请进入《canvas》频道 >>