900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 小程序华为手机canvas不显示问题

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

时间:2020-06-29 17:48:40

相关推荐

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

微信小程序在部分华为手机上,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,要注意单位的换算

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。