“模糊是多么 多么寂寞；模糊是多么 多么空虚；独自在清晰中，对比不断地扫过；我的寂寞，谁能明白我；模糊是多么 多么寂寞；模糊是多么 多么空虚；web开发的你，可不可听我诉说；我的寂寞，无尽的寂寞……”
——题记，改编源自《美人鱼》
昨夜西风凋碧树，独上高楼，望尽天涯路。
写H5 canvas的时候，我们可能会遇到这样那样的问题，比如说canvas合成的图片模糊，俗语有言“一颗老鼠屎坏了一锅粥”，最后有没有因模糊而坏了H5这锅粥也就自我衡量吧。索性来看看移动端canvas合成的图片模糊问题。先上两张图：
图1图2的对比，显而易见图1的质量低得不忍直视，一点点把H5拉低了档次，图2则相较清晰许多。第一张利用的是直接合成操作，第二张canvas做了放大处理再来合成。先来找找原因，合成的图片怎这般糊？再对症下药。
衣带渐宽终不悔，为伊消得人憔悴。
为什么会模糊？我们看看canvas是如何合成的。这里谈到一个词，像素渲染，涉及的属性有devicePixelRatio，解释如下：
The Window.devicePixelRatio
read-only property returns the ratio of the (vertical) size of one physical pixel on the current display device to the size of one device independent pixels(dips). [引自 MDN]
window.devicePixelRatio是设备的物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示为：window.devicePixelRatio = 物理像素 / dips
我们可以通过输出移动端的devicePixelRatio来看看，部分手机测的数据如下：
| device | devicePixelRatio |
|---|---|
| iphone6 | 2 |
| 魅蓝U20 | 3 |
| OPPO R9m | 3 |
| 红米note | 2 |
| mi3 | 3 |
现在ios的多数情况是这样的：视网膜的屏幕物理像素640，独立像素320，所以devicePixelRadio=640 / 320 = 2;。什么意思？比如说一张图片为100*100像素，在devicePixelRadio=2的情况，相当于用2个像素的宽度来渲染1个像素，所以实际上占了200*200的空间，相当于放大1倍。在canvas也有类似的属性：
canvas context中存在一个webkitBackingStorePixelRatio的属性（仅Safari和chrome），该属性的值决定了浏览器在渲染canvas之前会用几个像素来来存储画布信息。
若webkitBackingStorePixelRatio为2，canvas同理，用2个像素点的宽度来渲染。目前测到的iOS canvas的webkitBackingStorePixelRatio为1，安卓为undifined，测的手机不多，还没测到其他数据的手机。
也就是说，如果webkitBackingStorePixelRatio的值为2，而devicePixelRadio值也为2，生成的图片跟渲染的图片大小一致，这样的话是不会出现图片失真的情况。而当两者不一致时，那么问题就来了。
众里寻他千百度，蓦然回首，那人却在灯火阑珊处。
综上所述，我们的一个解决思路是对canvas的大小进行处理，使生成的图片跟渲染的图片一致。怎么一致？利用两者的比值，代码如下：
var devicePixelRatio = window.devicePixelRatio || 1,
backingStoreRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1,
ratio = devicePixelRatio / backingStoreRatio;
var oldWidth = canvas.width;
var oldHeight = canvas.height;
canvas.width = oldWidth * ratio;
canvas.height = oldHeight * ratio;
canvas.style.width = oldWidth + 'px';
canvas.style.height = oldHeight + 'px';
context.scale(ratio, ratio);
//进行正常的操作
context.drawImage()
具体手机具体对应，可能有人会奇怪怎有两个长度，事实上，一个是显示的canvas的css长宽，一个是canvas画布实际大小，两者并不冲突。暂此，敬请交流。
参考文章
http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
https://www.html5rocks.com/en/tutorials/canvas/hidpi/
http://blog.csdn.net/laijingyao881201/article/details/39505043
