canvas绘图怎么匹配多个手机型号 使用rpx
发布于 6 年前 作者 tlu 3043 次浏览 来自 问答

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();

3 回复

/**

  *

  * 根据比例适配长度

  * @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
  }
回到顶部