“模糊是多么 多么寂寞；模糊是多么 多么空虛；獨(dú)自在清晰中，對(duì)比不斷地掃過；我的寂寞，誰能明白我；模糊是多么 多么寂寞；模糊是多么 多么空虛；web開發(fā)的你，可不可聽我訴說；我的寂寞，無盡的寂寞……”
——題記，改編源自《美人魚》
昨夜西風(fēng)凋碧樹，獨(dú)上高樓，望盡天涯路。
寫H5 canvas的時(shí)候，我們可能會(huì)遇到這樣那樣的問題，比如說canvas合成的圖片模糊，俗語有言“一顆老鼠屎壞了一鍋粥”，最后有沒有因模糊而壞了H5這鍋粥也就自我衡量吧。索性來看看移動(dòng)端canvas合成的圖片模糊問題。先上兩張圖：
圖1圖2的對(duì)比，顯而易見圖1的質(zhì)量低得不忍直視，一點(diǎn)點(diǎn)把H5拉低了檔次，圖2則相較清晰許多。第一張利用的是直接合成操作，第二張canvas做了放大處理再來合成。先來找找原因，合成的圖片怎這般糊？再對(duì)癥下藥。
衣帶漸寬終不悔，為伊消得人憔悴。
為什么會(huì)模糊？我們看看canvas是如何合成的。這里談到一個(gè)詞，像素渲染，涉及的屬性有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是設(shè)備的物理像素和設(shè)備獨(dú)立像素(device-independent pixels (dips))的比例。
公式表示為：window.devicePixelRatio = 物理像素 / dips
我們可以通過輸出移動(dòng)端的devicePixelRatio來看看，部分手機(jī)測的數(shù)據(jù)如下：
| device | devicePixelRatio |
|---|---|
| iphone6 | 2 |
| 魅藍(lán)U20 | 3 |
| OPPO R9m | 3 |
| 紅米note | 2 |
| mi3 | 3 |
現(xiàn)在ios的多數(shù)情況是這樣的：視網(wǎng)膜的屏幕物理像素640，獨(dú)立像素320，所以devicePixelRadio=640 / 320 = 2;。什么意思？比如說一張圖片為100*100像素，在devicePixelRadio=2的情況，相當(dāng)于用2個(gè)像素的寬度來渲染1個(gè)像素，所以實(shí)際上占了200*200的空間，相當(dāng)于放大1倍。在canvas也有類似的屬性：
canvas context中存在一個(gè)webkitBackingStorePixelRatio的屬性（僅Safari和chrome），該屬性的值決定了瀏覽器在渲染canvas之前會(huì)用幾個(gè)像素來來存儲(chǔ)畫布信息。
若webkitBackingStorePixelRatio為2，canvas同理，用2個(gè)像素點(diǎn)的寬度來渲染。目前測到的iOS canvas的webkitBackingStorePixelRatio為1，安卓為undifined，測的手機(jī)不多，還沒測到其他數(shù)據(jù)的手機(jī)。
也就是說，如果webkitBackingStorePixelRatio的值為2，而devicePixelRadio值也為2，生成的圖片跟渲染的圖片大小一致，這樣的話是不會(huì)出現(xiàn)圖片失真的情況。而當(dāng)兩者不一致時(shí)，那么問題就來了。
眾里尋他千百度，驀然回首，那人卻在燈火闌珊處。
綜上所述，我們的一個(gè)解決思路是對(duì)canvas的大小進(jìn)行處理，使生成的圖片跟渲染的圖片一致。怎么一致？利用兩者的比值，代碼如下：
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);
//進(jìn)行正常的操作
context.drawImage()
具體手機(jī)具體對(duì)應(yīng)，可能有人會(huì)奇怪怎有兩個(gè)長度，事實(shí)上，一個(gè)是顯示的canvas的css長寬，一個(gè)是canvas畫布實(shí)際大小，兩者并不沖突。暫此，敬請交流。
參考文章
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
