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

本文摘自PHP中文网，作者黄舟，侵删。

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已经处理了这方面的问题。

相关阅读 >>

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

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者