本文摘自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已经处理了这方面的问题。
相关阅读 >>
html5与html的区别有哪些？html5与html四大区别总结
更多相关阅读请进入《canvas》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
