微信小程序在Page、Component中获取Canvas（2d）实例

一、wxml内容

<view class="canvas-viwe">
  <canvas id="canvas-normal" canvas-id="normal-canvas" class="canvas"></canvas>
  <canvas id="canvas-2d" class="canvas" type="2d"></canvas>
</view>

注意：如果Canvas没有开启type=2d模式，请声明canvas-id，否则会自带默认内联样式display:none！

二、wxss内容

.canvas {
    display: block;
    width: 300rpx;
    height: 300rpx;
}

.canvas + .canvas {
    margin-top: 30rpx;
}

三、js内容

// 在Page、Component中获取普通Canvas实例方法是一样的
getNormalContext: function () {
    var ctx = wx.createCanvasContext('canvas-normal', this);
    return Promise.resolve(ctx);
}

// 在Page中获取2d模式Canvas实例
get2dContext() {
    let width = 150, height = 150;
    let dpr = wx.getSystemInfoSync().pixelRatio;
    return new Promise(resolve => {
      wx.createSelectorQuery()
        .select('#canvas-2d')
        .fields({node: true, size: true})
        .exec(res => {
          let canvas = res[0].node;
          let context = canvas.getContext('2d');
          if (!_this.inited) {
              _this.inited = true;
              canvas.width = width * dpr;
              canvas.height = height * dpr;
              context.scale(dpr, dpr);
            }
          resolve({context, canvas})
        })
    })
}

// 在Component中获取2d模式Canvas实例
get2dContext: function () {
    let _this = this,width = 150, height = 150;
    var dpr = wx.getSystemInfoSync().pixelRatio;
    return new Promise(function (resolve) {
        wx.createSelectorQuery()
          .in(_this)
          .select('#canvas-2d')
          .node()
          .exec(function (res) {
              var canvas = res[0].node;
              var context = canvas.getContext('2d');
              if (!_this.inited) {
                  _this.inited = true;
                  canvas.width = width * dpr;
                  canvas.height = height * dpr;
                  context.scale(dpr, dpr);
              }
              resolve({context, canvas})
        });
    });
}