收藏
回答

微信开发工具 调试基础库升级至2.24.4时 canvas 绘制失败

框架类型 问题类型 操作系统 工具版本
小程序 Bug Windows 1.05.2204250
我们的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 节点
   
  },
回答关注问题邀请回答
收藏

1 个回答

  • Demons
    Demons
    2022-06-10

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2022-06-10
    有用
    回复 3
登录 后发表内容