canvas 移动端的bug。
发布于 6 年前 作者 jingsong 7505 次浏览 来自 问答

var rpxw , rpxh ;

//获取屏幕宽度,获取自适应单位

  wx.getSystemInfo({

  success: function (res) {

    rpxw = res.windowWidth / 568;

    rpxh = res.windowHeight/ 320;

    rpxw = 568 * rpxw ;

    rpxh = 320 * rpxh;

    console.log(rpxw,rpxh);

    platform = res.platform;  

  }

})

var canvas 

if (platform == “windows”) {

    canvas = wx.createCanvas(1024, 768);

}else{

    canvas = wx.createCanvas();

}

const context = canvas.getContext(“2d”);

const canvas1 = wx.createCanvas();

const context1 = canvas1.getContext(“2d”);

一. 绘制自适应手机全屏的矩形。

context.fillStyle = “#CCCC99”;

context.fillRect(0, 0, 568 * rpxw, 320 * rpxh);//矩形

1.把矩形直接绘制在上屏画布不能正常显示,宽度拉伸至全屏,高度缩短。

二 . 先把矩形绘制在离屏画布 

context1.fillStyle = “#CCCC99”;

context1.fillRect(0, 0, 568 * rpxw, 320 * rpxh);//矩形

context.drawImage(canvas1, 0, 0);

宽高带变量的矩形能正常显示,其余图像不能正常显示。

三 .矩形宽高不带变量。

context1.fillStyle = “#CCCC99”;

context1.fillRect(0, 0, 600 , 500 );//矩形

context.drawImage(canvas1, 0, 0);

1.宽高不带变量的所有图不能正常显示

四. 把变量rpxw ,rpxh 直接都声明赋值为为1时,宽高带变量的矩形也 不能正常显示。

五. 以上情况在开发者工具都能正常显示。

1 回复
回到顶部