cocos2dx js 關於canvas繪圖模糊問題及解決辦法

最近做了一個項目，發現同一張圖，在大部分安卓手機裏圖片很模糊，而在ios設備裏顯示清晰。開始我以爲是圖片的問題或者是手機性能的原因，但即使把圖片做的再大，再清楚也還是模糊。
爲此苦惱了好幾天。
後來無意中發現了一篇文章http://blog.csdn.net/laijingyao881201/article/details/39505043 
才恍然大悟


以下摘自這片博客
“在瀏覽器的window變量中有一個devicePixelRatio的屬性，該屬性決定了瀏覽器會用幾個（通常是2個）像素點來渲染1個像素，舉例來說，假設devicePixelRatio的值爲2，一張100x100像素大小的圖片，在retina屏幕下，會用2個像素點的寬度去渲染圖片的1個像素點，因此該圖片在retina屏幕上實際會佔據200x200像素的空間，相當於圖片被放大了一倍，因此圖片會變得模糊。”

在window中有一個devicePixelRatio的屬性，類似的，在canvas context中也存在一個webkitBackingStorePixelRatio的屬性（僅safari和chrome），該屬性的值決定了瀏覽器在渲染canvas之前會用幾個像素來來存儲畫布信息。

解決辦法，我們只需要得到  devicePixelRatio  和 webkitBackingStorePixelRatio（不同瀏覽器叫法不一，見代碼），相除，得到一個比例，然後畫圖的時候，寬和高都乘以這個比例就好了。


var devicePixelRatio = window.devicePixelRatio || 1;
                var backingStorePixelRatio = ctx.webkitBackingStorePixelRatio ||
                                             ctx.mozBackingStorePixelRatio ||
                                             ctx.msBackingStorePixelRatio ||
                                             ctx.oBackingStorePixelRatio ||
                                             ctx.backingStorePixelRatio || 1;


                var ratio = devicePixelRatio / backingStorePixelRatio;


但是在cocos2d js中，我們是不會直接用ctx 直接調用drawImage這個方法的。cocos都幫我們封裝好了。所以就要修改下源碼了。
在cocos2d-html5/cocos2d/下找到CCDrawingPrimitivesCanvas.js。打開這個文件，309行找打drawImage方法。加入以下代碼

var ctx = this._renderContext;
(function (canvas, ctx) {
var devicePixelRatio = window.devicePixelRatio || 1;
var backingStorePixelRatio = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio || 1;


var ratio = devicePixelRatio / backingStorePixelRatio;


if (devicePixelRatio !== backingStorePixelRatio) {
sourceSize.width *= ratio;
sourceSize.height *= ratio;
ctx.scale(ratio, ratio);
}

})(canvas, ctx);

ok，修改完成。打包發佈吧！

原文地址: 

http://www.cocoachina.com/bbs/read.PHP?tid-280565-keyword-%C4%A3%BA%FD.html