JS | canvas 合成图模糊

“模糊是多么 多么寂寞；模糊是多么 多么空虚；独自在清晰中，对比不断地扫过；我的寂寞，谁能明白我；模糊是多么 多么寂寞；模糊是多么 多么空虚；web开发的你，可不可听我诉说；我的寂寞，无尽的寂寞……”

——题记，改编源自《美人鱼》

昨夜西风凋碧树，独上高楼，望尽天涯路。

写H5 canvas的时候，我们可能会遇到这样那样的问题，比如说canvas合成的图片模糊，俗语有言“一颗老鼠屎坏了一锅粥”，最后有没有因模糊而坏了H5这锅粥也就自我衡量吧。索性来看看移动端canvas合成的图片模糊问题。先上两张图：

图1

图2

图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

简书原文：http://www.jianshu.com/p/3c223211ca7e