我们的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 节点
   
  },