移动端canvas画布加载图片模糊问题

参考链接：高清图片在不同移动端设备上的显示效果

1. 由于pc端和移动端的分辨率不同，在pc端1px表示一个物理像素，而移动端，根据屏幕的分辨率不同而屏幕的宽度相同时，这时候1px就不等于一个物理像素了。因此会出现模糊的现象。
2. window.devicePixelRati= 逻辑像素/ 物理像素
3. 物理像素（设备像素）：是显示器真正的像素点，我们可以将屏幕看成由一个一个的小灯组成，而1物理像素===1个小灯
4. 逻辑像素（设备独立像素）：是操作系统定义的一种像素单位。screen.width/height

例如：
早期的移动设备，只有物理像素，没有设备独立像素，在不缩放的前提下，CSS 中的 1px 就代表着 1 个物理像素。比如 iphone3的物理像素是 320 * 480，那么 width: 320px；的元素将会占满 iphone3 的屏幕宽度。
从 iphone4开始，苹果公司便推出了所谓的 Retina 屏，物理像素变成 640 * 960，但是屏幕尺寸没有变化，也就是说单位面积上的物理像素的数量增加了，或者说屏幕密度增加了。如果还按照原来那样，1px CSS 像素由 1个物理像素来渲染， 那么 width: 320px; 的元素只会占据半个屏幕的宽度。原来在 iphone3 上能够占满屏的网页，在 iphone4 上只会占一半的屏幕，同时 font-size: 20px; 的字体在 iphone4 上的尺寸也会缩小。 为了让同一个网页在iphone4 和 iphone3 上的有相同的显示效果，引入了独立像素的概念。iphone4 的独立像素为 320 * 480，是iphone4 的物理像素的一半，和 iphone3 的物理像素一样。也就是说，iphone4 上的 1 个独立像素 == 2个物理像素。在 iphone4 上，在不缩放的前提下，CSS 中的 1px 便由 1 个独立像素来渲染，相当于 2个物理像素。这样，width: 320px; 的元素由 320 个独立像素来渲染，也就是由 640 个物理像素来渲染，正好占满iphopn4 的屏幕宽度。font-size: 20px; 的字体在 iphone3 和 iphone4 上的尺寸也相同，只不过在iphone4 上的字体更清楚。

所以，我们要根据设备的像素比采用2x或者nx的图片，来保证图片的清晰度。