canvas 显示模糊问题

引子

近期的工作中，是继 canvas 宽高问题 之后碰到的第二个问题。

• Origin
• My GitHub

显示模糊问题

在 PC 浏览器上显示时，没有发现明显的模糊，还可以接受。但在手机上就会有明显的模糊。这是示例，扫描访问二维码如下。

示例中，用 css 控制 canvas 的宽高，里面的图片展示效果不一致。查询资料，在 stackoverflow 中发现同样的问题，通过实际测试发现：

• canvas 元素自身的属性 width 和 height，决定了多少像素可以显示在画布上，如果不设置，width 默认值是 300，height 默认值是 150。
• css 的属性 width 和 height，是指在屏幕上元素显示的大小，如果没有对 canvas 进行 css 设置，则会采用 canvas 的默认大小。
• 如果设置了 css 属性 width 和 height，当在画布里面使用 drawImage 设置图片宽高时，显示的宽高值会根据一定比例进行转换。例如在上面例子中，设置的图片是宽 300 高 90， canvas 默认宽高渲染像素 300 和 150，(css 高度/canvas 自身属性高度) * drawImag