小程序 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);