华为手机描画canvas时画不出来
发布于 6 年前 作者 yong19 6417 次浏览 来自 问答

小程序页面存在canvas,

当在其他页面跳转到canvas页面时,使用wx.navigateTo跳转过去,canvas未描画,锁屏再解锁就能显示出来(onShow事件为空)

附带问题:在我实际的工程里,即使不是其他页面刚跳转过来,也会有偶尔描画不出来的问题,同样是锁屏再解锁就能显示出来

延时1s再去draw 可以解决

已测试复现手机:

华为mate20,华为P20,荣耀V9

已测试不复现手机:

小米9SE,iPhoneX,iPhoneXsMax,iPhone8Plus,iPhone7,魅族16,小米mix2s,oppo r17 ,vivo x23, nexus6


其他人同样的问题:

1, https://developers.weixin.qq.com/community/develop/doc/000e28d218cd609fe298608e452800?highline=华为手机描画canvas时画不出来

2, https://developers.weixin.qq.com/community/develop/doc/000006645a84a811aa78c413d56c00?_at=1561964448196

3,https://developers.weixin.qq.com/community/develop/doc/000c6445450d081222c89fbc252000

4 回复

同样的问题,更坑的是空心矩形,无解context.strokeRect(x, y, w, h),只能用4条线代替

同样的问题,更坑的是空心矩形,无解context.strokeRect(x, y, w, h),只能用4条线代替

找到了一个解决方案 ,画完以后其实已经画上去了,只是华为手机上的小程序canvas因为某种原因没显示出来,改变下canvas大小就好了,我给宽度+1 然后在-1 就好了

reSize () {
var self = this
   var query = wx.createSelectorQuery().in(self)
query.select('#drawPanel').boundingClientRect(function (size) {
console.log('reSize===>>>', size)
self.setData({
height: size.height + 1 + 'px',
           width: size.width + 1 + 'px'
       })
console.log('self.data.height', self.data.height)
console.log('self.data.width', self.data.width)
}).exec()
}

写法问题

var ctx = wx.createCanvasContext(‘data’);

ctx.fillRect(10, 10, 1000, 100);

ctx.draw();

放到drawCanvas() 别指向到this里

请问这个问题有解决办法吗,这边碰到了同样的问题

碰到了同样的问题

回到顶部