不罗嗦，直接上例子
先看位置，在自定义组件内部用的canvas

<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>

let ctx; //最顶部定义的

methods:{
    //初始化画布
    initCanvas: function () {
      //获取画布对象
      ctx = wx.createCanvasContext('shareCanvas');
      //填充背景色
      let grd = ctx.createLinearGradient(0, 0, 0, 380)
      grd.addColorStop(0, '#00f');
      grd.addColorStop(0.2, '#0f0');
      grd.addColorStop(0.4, '#f00');
      grd.addColorStop(0.6, '#0ff');
      grd.addColorStop(0.8, '#f0f');
      grd.addColorStop(1, '#ff0');
      ctx.setFillStyle(grd);
      //填充
      ctx.fillRect(0, 0, 300, 380);
      //画
      ctx.draw();
      //背景色画好了，可以获取其他信息了
    },
}

效果：空白的 canvas

下边就到了打脸的时间了，上手册：wx.createCanvasContext

如果第二个参数 this 省略则不在任何自定义组件内查找
服 就改一丢丢就出来了：

	//初始化画布
    initCanvas: function () {
      //获取画布对象
      
      //这句代码，就这句
      ctx = wx.createCanvasContext('shareCanvas',this); //将当前自定义组件的 this 传递过去
      
      
      //填充背景色
      let grd = ctx.createLinearGradient(0, 0, 0, 380)
      grd.addColorStop(0, '#00f');
      grd.addColorStop(0.2, '#0f0');
      grd.addColorStop(0.4, '#f00');
      grd.addColorStop(0.6, '#0ff');
      grd.addColorStop(0.8, '#f0f');
      grd.addColorStop(1, '#ff0');
      ctx.setFillStyle(grd);
      //填充
      ctx.fillRect(0, 0, 300, 380);
      //画
      ctx.draw();
      //背景色画好了，可以获取其他信息了
    },

看截图：

OK，出来了，大马虎 …