canvas绘图怎么匹配多个手机型号使用rpx - WXOPEN Club

let canvas = wx.createCanvasContext(“shareCanvas”);

//绘制背景

canvas.drawImage(res[1].path, 0, 0, 301, 420);

canvas.save();

//绘制二维码

canvas.drawImage(res[0].path, 108, 262, 85, 85);

//绘制文字

canvas.font = “normal bold 20px sans-serif”;

canvas.fillStyle = “#fff”;

canvas.setTextAlign(“center”);

canvas.fillText(“您的好友“” + this.wechat + “””, 150, 40);

canvas.fillText(“送你20元红包”, 150, 65);

canvas.draw();

/**

* 根据比例适配长度

* @param {Number} v 计算前长度

* @returns {Number} 计算后的长度

function getSize(v) {

return v * (this.windowWidth / 375)

}

375是ui图的尺寸 windowWidth是当前屏幕宽度

我的做法是不管你手机屏幕多大全部生成一个固定尺寸的图片

省的有的屏幕小有的屏幕大上面的内容适配也麻烦屏幕小了挤到一起去了

屏幕大了空出来一大块

canvas是使用px作为单位的，匹配多个手机型号需要用rpx按比例转化成px，这是我写的，e是获取的设备信息，基本满足使用

ratioRPX(e) {

return e.screenWidth <= 320 && 0.426 ||

e.screenWidth <= 360 && 0.48 ||

e.screenWidth <= 375 && 0.5 ||

e.screenWidth <= 395 && 0.526 ||

0.552

}