html5canvas中绘制字体与图片以及图形模糊问题解决

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了html5canvas中绘制字体与图片以及图形模糊问题解决，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1854字，纯文字阅读大概需要3分钟。

内容图文

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。


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

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

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

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

内容总结

以上是互联网集市为您收集整理的html5canvas中绘制字体与图片以及图形模糊问题解决全部内容，希望文章能够帮你解决html5canvas中绘制字体与图片以及图形模糊问题解决所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---