小程序华为手机canvas不显示问题

微信小程序在部分华为手机上，canvas画布不显示绘制内容

1.先上代码，很简单就是先从网址上下载图片生成临时路径，然后把该图片绘制回来，测试用的是P30设备，现象就是啥都不显示，调试模式里log日志也没有任何错误

wx.getImageInfo({
	src: "http://mb-yun.oss-cn-hangzhou.aliyuncs.com/elinglishtalk/images/work_save_success.png", //网络图片路径
	success: res => {
		this.canvasWork(res.path)
	}
})

canvasWork: function(imagePath) {
	//获取学生名称
	let userName = "用户名"
	let ctx = wx.createCanvasContext('myCanvas');
	let W = 350;
	ctx.rect(0, 0, W, 568)
	ctx.setFillStyle('#fff')
	ctx.fill()
	ctx.clip();

	ctx.drawImage(imagePath, 135, 250, 80, 80, 0, 0)
	ctx.draw()
	ctx.beginPath()

	ctx.setFontSize(25);
	ctx.setFillStyle('#565656');

	let title = "作业打卡"

	ctx.fillText(title, (W - ctx.measureText(title).width) * 0.5, 100, 300);
	ctx.setFontSize(20);
	ctx.fillText(userName, (W - ctx.measureText(userName).width) * 0.5, 150, 300);
	ctx.draw(true);
},

2.起初以为是getImageInfo没有下载成功图片导致的，因此打了log发现回调的临时路径是好的，后来我直接去掉了getImageInfo方法，替换为本地的图片，但是经测试还是有问题的，因此排除getImageInfo的问题

ctx.drawImage("../../images/work_save_success.png", 135, 250, 80, 80,0,0)

3.去了微信开发社区搜了很长时间发现有类似的问题，解决方法就是加延时前往小程序开放社区

setTimeout(()=>{
  this.canvasWork()
},2000)

貌似目前就这么一种方法解决，保险起见延时2s，可能部分手机1s是不行的。

使用canvas相关需要注意的点

1.如果canvas是在自定义组件里，在createCanvasContext的时候需要传入this

wx.createCanvasContext('myCanvas',this);

2.使用CanvasContext的drawImage方法时，如果绘制的是网络图片则需要通过 getImageInfo / downloadFile 先下载
3.canvas获取绘制文本的宽度得到的单位是px，如果涉及到绘制文本内容居中需要计算左右间距相关的，需要注意你在wxml中设置的单位是px还是rpx，要注意单位的换算