cocos2dx js 关于canvas绘图模糊问题及解决办法
2015-01-28 20:17
537 查看
最近做了一个项目,发现同一张图,在大部分安卓手机里图片很模糊,而在ios设备里显示清晰。开始我以为是图片的问题或者是手机性能的原因,但即使把图片做的再大,再清楚也还是模糊。
为此苦恼了好几天。
后来无意中发现了一篇文章/article/9515790.html
才恍然大悟
以下摘自这片博客
“在浏览器的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
为此苦恼了好几天。
后来无意中发现了一篇文章/article/9515790.html
才恍然大悟
以下摘自这片博客
“在浏览器的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
相关文章推荐
- cocos2dx js 关于canvas绘图模糊问题及解决办法
- cocos2dx js 关于canvas绘图模糊问题及解决办法
- 关于JS的Ajax bf52 方法导致跨域问题的解决办法
- cocos2dx3.2 关于计算两点向量normalize问题的解决办法
- 关于cocos2d-html5纹理模糊的问题解决办法
- 关于Jetty锁定静态文件如JS,css外联文件的问题解决办法.;修改后不需要每次重启jetty服务器.适合window系统
- canvas 使绘制的图片在div 居中显示 ,解决绘图模糊问题
- 【游戏开发备注之一】关于Cocos2dx_v1.x版本iphone与Android运行出现图片白块、添加GameCenter报错问题及编译Android闪退的解决办法&&CCLOG与CClog的区别
- 关于win7升级win10后高分屏界面显示模糊问题,字迹显示模糊问题解决办法
- 关于js的ajax方法导致跨域问题的解决办法
- 关于UITabbarItem在iOS 8 上显示不知道哪里来的蓝色并且模糊的问题解决办法
- 关于解决JS中方法名重复问题的简单办法
- zf-关于荆州首页鼠标移动到导航栏上去触发的js 显示 问题解决办法
- canvas 绘图出现模糊问题的解决方法
- android编程过程中遇到的关于Canvas: trying to use a recycled bitmap android.graphics.Bitmap问题的原因及解决办法
- 关于UITabbarItem在iOS 8 上显示不知道哪里来的蓝色并且模糊的问题解决办法
- 关于js中计算精度的问题解决办法
- 关于js的跨域问题解决办法
- 关于系统时间被改问题的解决办法
- VC中关于路径中含有空格问题的解决办法