微信小程序

canvas 实现不同屏幕的自适应，其实在我看来就是获取设备的宽度，然后与自己的设计开发尺寸做一个比值，然后给每个数值相乘就好了，

 

注意：本文转自 https://blog.csdn.net/zSY_snake/article/details/81188128

 

 

 

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

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

由此可知我们开发中常用的参考屏幕尺寸（iPhone6）为：375*667；

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

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

1.  var rpx;
2.  　　//获取屏幕宽度，获取自适应单位
3.         wx.getSystemInfo({
4.         success: function(res) {
5.              rpx = res.windowWidth/375;
6.          },
7.  })

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

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