小程序canvas绘制图片

/**
   * 绘制分享的图片
   * @param goodsPicPath 商品图片的本地链接
   * @param qrCodePath 二维码的本地链接
   */
  drawSharePic: function(goodsPicPath, qrCodePath) {
    let that = this;
    that.setData({
      displayBg: \'block\'
    })
    wx.showLoading({
      title: \'正在生成图片...\',
      mask: true,
    });

    //y方向的偏移量，因为是从上往下绘制的，所以y一直向下偏移，不断增大。
    const imgWidth = that.data.width;
    const imgHeight = that.data.height;

    const canvasCtx = wx.createCanvasContext(\'mycanvas\');
    //绘制背景
    canvasCtx.setFillStyle(\'white\');
    canvasCtx.fillRect(0, 0, 390, 800);

    //绘制头像
    function drawHeadPortrait() {
      //圆形切割-开始
      canvasCtx.save();
      canvasCtx.beginPath();
      //(圆心)X轴,Y轴,半径,起始,结束
      canvasCtx.arc(50, 50, 25, 0, 2 * Math.PI);
      canvasCtx.clip();
      //圆形切割-结束
      canvasCtx.drawImage(that.data.model.head_portrait, 25, 25, 50, 50);
      canvasCtx.restore();
    }

    //绘制昵称 ~~时间
    function drawNickname() {
      canvasCtx.setFontSize(14);
      canvasCtx.setFillStyle(\'#333333\');
      canvasCtx.fillText(that.data.model.nickname, 85, 45);
      //时间
      canvasCtx.setFontSize(12);
      canvasCtx.setFillStyle(\'#8E8E8E\');
      canvasCtx.fillText(that.data.model.start_time.replace(/-/g, \'.\') + "发布了一个接龙", 85, 65);
    }

    //绘制主题 内容介绍
    function drawTheme() {
      canvasCtx.setFontSize(20);
      canvasCtx.setFillStyle(\'#000000\');
      canvasCtx.fillText(that.data.model.title, 25, 110);

      if (typeof(that.data.model.tips) != null && typeof(that.data.model.tips) != "undefined" && that.data.model.tips != \'\') {
        //内容
        canvasCtx.setFontSize(14);
        canvasCtx.setFillStyle(\'#8E8E8E\');
        canvasCtx.fillText(that.data.model.tips, 25, 160);
      }

      //绘制主图
      canvasCtx.drawImage(goodsPicPath, 0, 170, 390, 320);
      //绘制最底部文字
      canvasCtx.setFontSize(14);
      canvasCtx.setFillStyle(\'#8E8E8E\');
      canvasCtx.fillText("一群人正在赶来接龙", 120, 550);
      //绘制二维码
      canvasCtx.drawImage(qrCodePath, 250, 500, 100, 100);
    }

    // 依次执行各个方法
    function drawNow() {
      drawHeadPortrait();
      drawNickname();
      drawTheme();
      canvasCtx.draw();
      //绘制之后加一个延时去生成图片，如果直接生成可能没有绘制完成，导出图片会有问题。
      setTimeout(function() {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: imgWidth,
          height: imgHeight,
          destWidth: imgWidth,
          destHeight: imgHeight,
          canvasId: \'mycanvas\',
          success: function(res) {
            if (res.errMsg == "canvasToTempFilePath:ok") {
              that.setData({
                shareImage: res.tempFilePath,
                showSharePic: true,
                display: \'block\'
              })
            }
            wx.hideLoading();
          },
          fail: function(res) {
            wx.hideLoading();
          }
        })
      }, 2000);
    }
    //最后统一draw
    drawNow();
  },