微信小程序在部分华为手机上,canvas画布不显示绘制内容
1.先上代码,很简单就是先从网址上下载图片生成临时路径,然后把该图片绘制回来,测试用的是P30设备,现象就是啥都不显示,调试模式里log日志也没有任何错误
wx.getImageInfo({src: "http://mb-yun.oss-cn-/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,要注意单位的换算