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