“模糊是多么 多么寂寞毡琉；模糊是多么 多么空虛；獨(dú)自在清晰中妙色，對(duì)比不斷地掃過(guò)桅滋；我的寂寞，誰(shuí)能明白我身辨；模糊是多么 多么寂寞丐谋；模糊是多么 多么空虛；web開(kāi)發(fā)的你煌珊，可不可聽(tīng)我訴說(shuō)号俐；我的寂寞，無(wú)盡的寂寞……”
——題記定庵，改編源自《美人魚(yú)》
昨夜西風(fēng)凋碧樹(shù)萧落，獨(dú)上高樓，望盡天涯路洗贰。
寫(xiě)H5 canvas的時(shí)候找岖，我們可能會(huì)遇到這樣那樣的問(wèn)題，比如說(shuō)canvas合成的圖片模糊敛滋，俗語(yǔ)有言“一顆老鼠屎壞了一鍋粥”许布，最后有沒(méi)有因模糊而壞了H5這鍋粥也就自我衡量吧。索性來(lái)看看移動(dòng)端canvas合成的圖片模糊問(wèn)題绎晃。先上兩張圖：
圖1圖2的對(duì)比蜜唾，顯而易見(jiàn)圖1的質(zhì)量低得不忍直視杂曲，一點(diǎn)點(diǎn)把H5拉低了檔次，圖2則相較清晰許多袁余。第一張利用的是直接合成操作擎勘，第二張canvas做了放大處理再來(lái)合成。先來(lái)找找原因颖榜，合成的圖片怎這般糊棚饵？再對(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
我們可以通過(guò)輸出移動(dòng)端的devicePixelRatio來(lái)看看，部分手機(jī)測(cè)的數(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;。什么意思桅咆？比如說(shuō)一張圖片為100*100像素括授，在devicePixelRadio=2的情況坞笙，相當(dāng)于用2個(gè)像素的寬度來(lái)渲染1個(gè)像素岩饼，所以實(shí)際上占了200*200的空間，相當(dāng)于放大1倍薛夜。在canvas也有類似的屬性：
canvas context中存在一個(gè)webkitBackingStorePixelRatio的屬性（僅Safari和chrome）籍茧，該屬性的值決定了瀏覽器在渲染canvas之前會(huì)用幾個(gè)像素來(lái)來(lái)存儲(chǔ)畫(huà)布信息。
若webkitBackingStorePixelRatio為2梯澜，canvas同理寞冯，用2個(gè)像素點(diǎn)的寬度來(lái)渲染。目前測(cè)到的iOS canvas的webkitBackingStorePixelRatio為1晚伙，安卓為undifined吮龄，測(cè)的手機(jī)不多，還沒(méi)測(cè)到其他數(shù)據(jù)的手機(jī)咆疗。
也就是說(shuō)漓帚，如果webkitBackingStorePixelRatio的值為2，而devicePixelRadio值也為2午磁，生成的圖片跟渲染的圖片大小一致尝抖，這樣的話是不會(huì)出現(xiàn)圖片失真的情況毡们。而當(dāng)兩者不一致時(shí)，那么問(wèn)題就來(lái)了昧辽。
眾里尋他千百度衙熔，驀然回首，那人卻在燈火闌珊處搅荞。
綜上所述红氯，我們的一個(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è)長(zhǎng)度产阱，事實(shí)上，一個(gè)是顯示的canvas的css長(zhǎng)寬块仆，一個(gè)是canvas畫(huà)布實(shí)際大小构蹬，兩者并不沖突。暫此悔据，敬請(qǐng)交流庄敛。
參考文章
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
