微信小程序canvas画布自适应屏幕大小

1. 在canvas的style中动态设置高和宽

  <canvas class='canvas' style='width:{{canvasWidth}}px; height:{{canvasHeight}}px'  disable-scroll='true'>
  
  </canvas>

 

2. 在.js生命周期函数中获取可使用窗口高度和宽度来调整canvas的高和宽

    wx.getSystemInfo({
      success: function(res) {
        myCanvasWidth = res.windowWidth - 56
        myCanvasHeight = res.windowHeight - 200
      },
    })
    this.setData({
      canvasWidth: myCanvasWidth,
      canvasHeight: myCanvasHeight
    })