wxml部分
<button class=‘Stroll’ open-type=‘share’>转发到群聊</button>
<!-- canvas -->
<canvas canvas-id='customCanvas’style=‘width:100%;height:300px;margin: 0;padding: 0;display: block;background-color:#eeeeee’></canvas>

js
var app = getApp();
Page({
data: {
picUrl:’’,
userInfo:{},
locolurl:’’
},
onShow: function () {

},
onLoad: function () {
let headShare =’’;
var that = this;
//获取用户信息
wx.getUserInfo({
success: function (res) {
let thats=that
// 下载头像图片
wx.downloadFile({
url: res.userInfo.avatarUrl,
success: res1 => {
if (res1.statusCode === 200) {
console.log(res)
// canvas画布
var ctx = wx.createCanvasContext(‘customCanvas’)
var text = “啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊”
var avatarurl_width = 50;
var avatarurl_heigth = 50;
var avatarurl_x = 120;
var avatarurl_y = 30;
// 头
ctx.save();
ctx.beginPath()
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
ctx.clip();
ctx.drawImage(res1.tempFilePath, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
ctx.restore();
ctx.setFillStyle(’#000’)
ctx.setFontSize(16)
// 头部文字
ctx.fillText(res.userInfo.nickName, 180, 60)
ctx.setFillStyle(’#45d6a2’)
// 中间文字
dealWords({
//画布上下文
ctx: ctx,
//字体大小
fontSize: 22,
//需要处理的文字
word: text,
//一行文字最大宽度
maxWidth: 290,
//文字在x轴要显示的位置
x: 50,
//文字在y轴要显示的位置
y: 110,
//文字最多显示的行数
maxLine: 1
})
ctx.setFillStyle("#fff"); //设置纯色填充
ctx.fillRect(30, 160, 310, 60);
// 底部圆
ctx.save();
ctx.beginPath()
ctx.arc(40 / 2 + 45, 40 / 2 + 170, 40 / 2, 0, Math.PI * 2, false);
ctx.clip();
ctx.drawImage("/images/my.jpg", 45, 170, 40, 40);
ctx.restore();

          // 底部文字
          ctx.setFillStyle('gray')
          dealWords({
            ctx: ctx,
            fontSize: 16,
            word: text,
            maxWidth: 230,
            x: 100,
            y: 170,
            maxLine: 2
          })
          // 通过回调把canvas画布生成图片
          ctx.draw(true, () => {
            setTimeout(() => {
              wx.canvasToTempFilePath({
                canvasId: 'customCanvas',
                success: (res) => {
                 
                  let thatsz = thats
                  console.log(res.tempFilePath)
                  wx.saveFile({//把文件保存到本地

                    tempFilePath: res.tempFilePath,

                    success: function (resl) {
                      console.log(resl.savedFilePath)
                      thatsz.setData({
                        picUrl: resl.savedFilePath
                      });

                    }

                  })
                }
              }, thats); //在组件中使用这里一定记得要绑定this，切记！！！
            }, 300); //此处加入300毫秒延时是为了解决小程序绘制过程中的渲染问题
          });

        }
      }, fail: res => {
        console.log(res);
      }
    })
  },
})




function  dealWords(options) {
  options.ctx.setFontSize(options.fontSize);//设置字体大小
  var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//实际总共能分多少行
  var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数

  var endPos = 0;//当前字符串的截断点
  for (var j = 0; j < count; j++) {
    var nowStr = options.word.slice(endPos);//当前剩余的字符串
    var rowWid = 0;//每一行当前宽度    
    if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果当前的字符串宽度大于最大宽度，然后开始截取
      for (var m = 0; m < nowStr.length; m++) {
        rowWid += options.ctx.measureText(nowStr[m]).width;//当前字符串总宽度
        if (rowWid > options.maxWidth) {
          if (j === options.maxLine - 1) { //如果是最后一行
            options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 18);    //(j+1)*18这是每一行的高度        
          } else {
            options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 18);
          }
          endPos += m;//下次截断点
          break;
        }
      }
    } else {//如果当前的字符串宽度小于最大宽度就直接输出
      options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 18);
    }
  }
}

},
onShareAppMessage: function () {
console.log(this.data.picUrl)
return {
title: ‘’,
path: ‘aaa’,
imageUrl: this.data.picUrl,
success: function (res) {
// 转发成功
wx.showToast({
title: “分享成功”,
icon: ‘success’,
duration: 2000
})
},
fail: function (res) {
// 分享失败
},
}
},
})
求大佬帮忙卡看看呀。为什么放在项目中分享出去的canvas图不显示
canvas画布在真机上也没有内容。