由于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;
/** * * 此样式在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); |
你确定在IOS可以吗?
官方大兄弟,有考虑支持的可能吗?[/滑稽]