微信小程序canvas画图使用百分比适配不同机型屏幕达到任何屏幕比例皆可！完美适配任何机型！指定canvas尺寸适配亦可！保证全网唯一完美

错误代码示例：

javascript 复制代码

// 在onLoad中调用
const that = this
wx.getSystemInfo({
  success: function (res) {
    console.log(res)
    that.setData({
      model: res.model,
      screen_width: res.windowWidth/375,
      screen_height: res.windowHeight
    })
  }
})

我看到网上很多使用上面这种代码去适配，其实这是错误的方式，不能应用到全部场景

接下来使用如下方式处理完美适配

PS: 未经允许，禁止转载，否则法律伺候！

第一步，获取需要画图的宽高

如果是画整个屏幕，就用wx.getSystemInfoSync()获取windowWidth和windowHeight，然后把canvas宽高使用100%就行

如果是只画指定宽高大小，那么就将canvas的宽高指定，单位rpx，然后使用如下代码获取不同机型的真实宽高

javascript 复制代码

wx.createSelectorQuery().select('.tsccc')
				obj.boundingClientRect(function (data) {
					data.width
					data.height
				}).exec()

第二步，使用一个固定机型作为参数，先将图画好

例如：使用iphone 13 pro 机型，此时.tsccc 获取的指定真实宽高是 340px 和 543px

然后根据自己所需要将canvas图绘制完成。绘制的时候直接使用固定的px数值即可。

例如：一段文字的xy和大小

javascript 复制代码

ctx.setFontSize(14) //设置字体大小
ctx.fillText('张三', 40, 66); //设置文字，并指定坐标

只要能达到自己想要的绘制效果就可以了。此时绘制完成，第二步就完成了

第三步，计算百分比完美适配不同机型屏幕

此时我们是用的iphone 13pro 的屏幕作为参考，所以第二步完成的时候，就是只有13pro是正常展示的绘制内容。

将第二步获取到的340 和543 这两个参数，用于计算 x和y的百分比位置，以及绘制内容宽高的百分比位置

例如第二步的文字字体大小和x,y坐标位置：

字体大小(字体的size是高度的意思)：14 除 543 = 0.02578269 (这就是字体大小固定的百分比了)

然后将 543 乘这个百分比，就是每个机型屏幕相应的大小了。

不同机型的高乘 0.02578269 = 该机型需要的px大小

宽的方式也是如此计算

先得到百分比，在用百分比乘不同机型的宽高，得到不同机型的相应大小。

x坐标：40 除 340 = 0.117647 (这就是x坐标需要被固定的百分比了)

y坐标：66 除 543 = 0.121546 (这就是y坐标需要被固定的百分比了)

以下是完整的代码示例(已计算出百分比的)：

PS:切记，不要傻傻的使用画蛇添足的写法，例如：(14 除以 543 乘 543），一定要自己手动算得到的百分比去乘宽高！跟如下代码一样

javascript 复制代码

card(){
	Promise.all([that.getImageInfo(that.currentBackgroundUrl),that.getImageInfo(that.touxiang),that.getImageInfo(that.qrcode),]).then((res) =>{
		// 使用画布创建上下文 图片
		var ctx = wx.createCanvasContext("cardCanvas") 
		// 绘制底图背景图。坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
		ctx.drawImage(res[0].path, 0, 0, that.width,that.height) 
		//绘制头像，图片路径，x坐标，y坐标，width，height）
		var tx_x=that.width*0.0647;
		var tx_y=that.height*0.1538;
		var tx_width=that.width*0.191;
		var tx_height=that.height*0.3077;
		ctx.drawImage(res[1].path, tx_x, tx_y, tx_width,tx_height) 
		//绘制名字
		ctx.setFontSize(that.height*0.0884) //设置字体大小，默认10
		ctx.fillText('张三', that.width*0.38, that.height*0.230769); //文字内容、x坐标，y坐标
		
		//保存
		ctx.save(); 
		//绘制
		ctx.draw(false,function(){
			wx.canvasToTempFilePath({
				width:1080,
				height:1760,
				destWidth:1080*2,//这里乘以2是为了保证合成图片的清晰度
				destHeight:1760*2,
				fileType: "jpg",
				canvasId: 'cardCanvas',
				success: function(res) {
					that.currentCanvasUrl = res.tempFilePath
					uni.hideLoading()
				}
			})
		}) 
	})
},

//获取图片的基本信息，即将网络图片转成本地图片，
getImageInfo(src) {
	return new Promise((resolve, reject) => {
		uni.getImageInfo({
			src,
			success: (res) => resolve(res),
			fail: (res) => reject(res)
		})
	});
},