小程序丨canvas内容自适应不同尺寸屏幕

最近在做一个项目，需要在小程序里面生成宣发海报，保存在本地。

用真机预览的时候，发现在小米8上面位置有所偏差。

因为在绘制内容时所应用的单位是 px，但是小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位，而设计稿的尺寸目测常规的都是按照 iPhone6 屏幕尺寸（375*667）来制作的。

如果想要适应其他尺寸的屏幕时其实需按照iPhone6的绘制大小按比例进行换算即可：

1 let rpx=1;
2   
3 wx.getSystemInfo({
4     success(res) {
5       rpx = res.windowWidth/375;
6     },
7 })

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

let context = wx.createCanvasContext("shareCanvas");
context.drawImage(this.logoUrl, 0, 0, 265 * rpx, 262.5 * rpx);

　　

转载于:https://www.cnblogs.com/hrone/p/9915006.html