注意我说的是小游戏下的上屏Canvas,
我用Canvas中加载外部图片,图片根据设备屏幕需要适配缩放,
要么调用Canvas绘图上下文ctx.scale(计算好的倍率,计算好的倍率),要么:
ctx.drawImage(this._IMG, 50,80, this._IMG.width/ 计算好的倍率 , this._IMG.height/ 计算好的倍率);
但这两种方式使用后,都导致了图片失真,锯齿敢很强,从小游戏Demo中飞机大战那个,背景就是用方法2处理的,存在模糊感,不过画面连续在动,且内容丰富,并不会被人注意,如果是问题,明显就虚了,再看看 欢乐坦克大战,就没有锯齿感,请问,正确的实现方式是怎么做的。
不要跟我说,我例图中,虚是因为左边的比右边的大一点,
这两个图片都是设备适配后的,真实图片要比这两个缩放后的像素大一倍且高清,
左边的是调用Canvas加载的Img,右边的是 WXML直接<img>直接引入的,css控制适配。
放大ratio倍后,ios正常了,安卓还是模糊
let sysInfo = wx.getSystemInfoSync();
//console.log("sysInfo:",sysInfo);
let canvas = wx.createCanvas();
//像素缩放
canvas.width = sysInfo.screenWidth * sysInfo.pixelRatio;
canvas.height = sysInfo.screenHeight * sysInfo.pixelRatio;
如此一来,所有的位置,长宽,都要乘以sysInfo.pixelRatio了。
大哥,能贴点代码出来吗?
Screen is not defined 提示Screen未定义呀
let System = wx.getSystemInfoSync();
感谢!
找到了,放大画布
你好,我也遇到了这种情况,请问放大画布指的是什么,能否详细说明
canvas.width = Screen.width*2;
canvas.height = Screen.height*2;
好的,非常感谢
楼主,问下,小程序怎么获取canvas对象呢?
let canvas = wx.createCanvas();
楼主该问题有找到合适的解决方案了吗
canvas.width = Screen.width*2;
canvas.height = Screen.height*2;