微信小程序在自定義組件內部調用canvas繪圖，畫不上去，空白

不羅嗦，直接上例子
先看位置，在自定義組件內部用的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，出來了，大馬虎 …