uni-app开发心得（三）

最近开始研究使用微信的canvas画图，微信需要使用贴图的话2.9开始，已经停止维护小程序前面的canvas接口

<canvas canvas-id="share" type="2d" id="share" class="share" />

需要使用type="2d"才支持在微信上绘图，接口和html的canvas2D一致，但因为微信整体文档写得比较乱，所以在这里整理一份怎么将贴图画进canvas的type=2d时的画法

第一步，在onReady方法里，通过wx.createSelectorQuery()方法，获取到节点查询对象

 onReady() {

    const query = wx.createSelectorQuery();

    query

      .select("#share")

      .fields({

        id: true,

        node: true,

        size: true,

      })

      .exec(this.init.bind(this));

  },

调用methods里的init方法，拿到对象后，通过canvas.getContext("2d"),获取canvas2d对象，然后通过canvas创建一个image对象，把得到的image对象画如制定的位置

init(res) {

      const canvas = res[0].node;

      this.canvas = canvas;

      const ctx = canvas.getContext("2d");

      const image = canvas.createImage();

      image.onload = () => {

          ctx.drawImage(

            image,

            uni.upx2px(750 - 45 - 175),

            0,

            uni.upx2px(175),

            uni.upx2px(270)

          );

      };

      image.src = "/static/myserver.png";

}

 这样就把贴图画入canvas了