微信小程序生成自适应海报

2019/8/30 22:35:25 人评论 次浏览 分类:开发资料

小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位,在绘制内容时所应用的单位仍然是 px,那么如何实现不同尺寸屏幕的自适应呢?

首先我们根据开发工具可知不同常用屏幕的尺寸:

由此可知我们开发中常用的参考屏幕尺寸(iPhone6)为:375*667;

那么想要适应其他尺寸的屏幕时只需按照iPhone6的绘制大小按比例进行换算即可:

首先利用wx.getSystemInfo (获取系统信息)的API获取屏幕宽度,然后除iPhone6的屏幕宽度,即可得到相对单位


var rpx; //获取屏幕宽度,获取自适应单位
wx.getSystemInfo({
  success: function(res) {
    rpx = res.windowWidth/375;
  },
})

在绘制方法中将参数乘以相对单位即可实现自适应:

const s = wx.createCanvasContext("canvas");
s.drawImage(Url, 0, 0, 265 * rpx, 262.5 * rpx);

赞赏

相关教程

  • 微信小程序卡券开发(亲测)

    提示:小程序卡券和公众平台调用基本一致,请先查看公众平台卡券文档一、公众帐号/小程序绑定由于微信卡券用的是一套逻辑。所以小程序需要先和公众账号绑定,才能在小程序中调起公众平台卡券登录微信公众平台:https://open.weixin.qq.com/ 进行绑定操作二、公众号卡券添加小……

    2017/6/3 18:45:01

共有访客发表了评论 网友评论

验证码: 看不清楚?