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时,宽高带变量的矩形也 不能正常显示。
五. 以上情况在开发者工具都能正常显示。