收藏
回答

关于Canvas缩放时插值算法的控制属性image-rendering支持

框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
小游戏 Bug Android 8.1.0 360 N7 6.7.3

由于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);


最后一次编辑于  2018-12-20
回答关注问题邀请回答
收藏

2 个回答

  • Ziv
    Ziv
    2020-01-15

    你确定在IOS可以吗?

    2020-01-15
    有用
    回复
  • droid
    droid
    2018-12-22

    官方大兄弟,有考虑支持的可能吗?[/滑稽]

    2018-12-22
    有用
    回复
登录 后发表内容