使用canvas时, 如何用相对单位(rem, rpx)来适配不同机型

使用canvas的api时, 使用的都是绝对数值, 如:

方法传参是坐标位置，不带单位，如ctx.translate(10,10);

那么此时, 我就需要将rem或rpx 转换成 px;

首先, 获取设备宽度

h5: var clientWidth = document.documentElement.clientWidth;

小程序没有document对象, 所以要使用小程序自带的api获取设备宽度

var clientWidth = wx.getSystemInfoSync().windowWidth;

然后进行单位换算!

我以小程序为例

我们UI出的图是750, 以iphone6为标准;

所以 375/750 = clientWidth/x ;

x为转换后的数值;

直接按UI图尺寸换算成px再传入canvas的方法中即可 !