使用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的方法中即可 !