html canvas 模糊,解决 canvas 在高清屏中绘制模糊的问题

使用 canvas 绘制图片或者是文字在 Retina 屏中会非常模糊。如图：

因为 canvas 不是矢量图，而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占据了2倍的空间，相当于图片被放大了一倍，因此绘制出来的图片文字等会变模糊。

因此，要做 Retina 屏适配，关键是知道当前屏幕的设备像素比，然后将 canvas 放大到该设备像素比来绘制，然后将 canvas 压缩到一倍来展示。

解决思路

在浏览器的 window 对象中有一个 devicePixelRatio 的属性，该属性表示了屏幕的设备像素比，即用几个(通常是2个)像素点宽度来渲染1个像素。

举例来说，假设 devicePixelRatio 的值为 2 ，一张 100×100 像素大小的图片，在 Retina 屏幕下，会用 2 个像素点的宽度去渲染图片的 1 个像素点，因此该图片在 Retina 屏幕上实际