- 微信开发者工具修改基础库为2.25.0版本,canvas渲染失败?
使用微信开发者工具将基础库修改为2.25.0版本后 canvas position:fixed 动态修改left后渲染失败。 经过测试此问题从2.24.4版本起就会出现。 https://developers.weixin.qq.com/s/JlCUXzmi7FA3 以上是基于官方提供的demo修改后复现问题的分享代码 复现步骤: [图片] 如图所示刚开始将left设置为:9999px,即离屏状态 [图片] 然后通过设置定时任务将left设置为空,即进入屏幕状态。会无法绘制。 [图片] 不动态修改left的话绘制没有问题。 我们的需求是需要动态的显示隐藏canvas,所以采用这种方式。如果能有其他方式替代也请说明,谢谢!
2022-07-07 - 微信开发工具 调试基础库升级至2.24.4时 canvas 绘制失败
我们的canvas需要先隐藏后显示,但是canvas是原生组件不能动态创建隐藏。因此采用left:9999px的方式先隐藏canvas 基于微信小程序官方canvas demo 进行如下修改 <wxml/> <view class="fixed" style="{{isInit ? '' : 'left:9999px'}}"> <canvas type="2d" id="canvas" style="width: 300px; height: 300px;" ></canvas> </view> <wxss> .intro { margin: 30px; text-align: center; } canvas-components { width: 400px; height: 400px; } .fixed { position: fixed; left: 0; top: 0; width: 100%; height: 100px; } <js> data: { isInit: false, }, onLoad: function () { this.position = { x: 150, y: 150, vx: 2, vy: 2 } this.x = -100 const that = this; setTimeout(()=>{ that.setData({ isInit:true }, ()=>{ wx.createSelectorQuery() .select('#canvas') .fields({ node: true, size: true, }) .exec(that.init.bind(that)) }); }, 1000) // 通过 SelectorQuery 获取 Canvas 节点 },
2022-06-09