你确定在IOS可以吗?
关于Canvas缩放时插值算法的控制属性image-rendering支持由于Android小游戏canvas无法设置imageRendering样式,导致缩放产生模糊。 在模拟器及IOS中可正常设置,无此问题。 - 当前 Bug 的表现(可附上截图) [图片] - 预期表现 [图片] - 复现路径 进入小游戏即可出现 - 提供一个最简复现 Demo [代码]var[代码] [代码]canvas = wx.createCanvas();[代码][代码]var[代码] [代码]buff = wx.createCanvas();[代码] [代码]var[代码] [代码]sysinfo = wx.getSystemInfoSync();[代码][代码]buff.width = sysinfo.windowWidth;[代码][代码]buff.height = sysinfo.windowHeight;[代码][代码]//由于无法控制css的宽高,只能缩小画布实现放大[代码][代码]canvas.width = sysinfo.windowWidth/4;[代码][代码]canvas.height = sysinfo.windowHeight/4;[代码] [代码] [代码] [代码] [代码] [代码]/**[代码][代码] [代码][代码]* [代码][代码] [代码][代码]* 此样式在Android无法使用,导致模糊问题[代码][代码] [代码][代码]* canvas.style.imageRendering='pixelated';[代码][代码] [代码][代码]*/[代码] [代码]var[代码] [代码]x = 10;[代码][代码]var[代码] [代码]y = 10;[代码] [代码]var[代码] [代码]buffctx = buff.getContext([代码][代码]'2d'[代码][代码]);[代码][代码]var[代码] [代码]mainctx = canvas.getContext([代码][代码]'2d'[代码][代码]);[代码][代码]//背景色[代码][代码]buffctx.fillStyle = [代码][代码]'#ffffff'[代码][代码];[代码][代码]buffctx.fillRect(0, 0, buff.width, buff.height);[代码][代码]//X图像数据[代码][代码]var[代码] [代码]xdata = [[代码][代码] [代码][代码]1, 0, 0, 0, 1,[代码][代码] [代码][代码]0, 1, 0, 1, 0,[代码][代码] [代码][代码]0, 0, 1, 0, 0,[代码][代码] [代码][代码]0, 1, 0, 1, 0,[代码][代码] [代码][代码]1, 0, 0, 0, 1[代码][代码]];[代码][代码]var[代码] [代码]img=buffctx.getImageData(x,y,5,5);[代码][代码]for[代码][代码]([代码][代码]var[代码] [代码]i=0,m=xdata.length;i<m;i++){[代码][代码] [代码][代码]//每像素4字节[代码][代码] [代码][代码]if[代码][代码](xdata[i] == 1){[代码][代码] [代码][代码]img.data[i * 4] = 0;[代码][代码] [代码][代码]img.data[i * 4+1] = 0;[代码][代码] [代码][代码]img.data[i * 4+2] = 0;[代码][代码] [代码][代码]img.data[i * 4+3] = 255;[代码][代码] [代码][代码]} [代码][代码]else[代码] [代码]{[代码][代码] [代码][代码]img.data[i * 4] = 255;[代码][代码] [代码][代码]img.data[i * 4 + 1] = 255;[代码][代码] [代码][代码]img.data[i * 4 + 2] = 255;[代码][代码] [代码][代码]img.data[i * 4 + 3] = 255;[代码][代码] [代码][代码]}[代码][代码]}[代码][代码]//画入buff[代码][代码]buffctx.putImageData(img, x, y);[代码][代码]//从buff画入主屏,此时产生缩放效果[代码]setInterval(function(){ mainctx.drawImage(buff, 0, 0); },1000);
2020-01-15