微信小程序Canvas绘制文字（换行和省略号）

微信小程序Canvas绘制文本时要实现换行和超出部分显示为省略号

主要使用的API（详见微信文档）:
CanvasContext.measureText
CanvasContext.fillText

// 文本2行换行与显示省略号
// 1、canvas对象 2、文本 3、X轴 4、Y轴 5、单行行高 6、文本的宽度
drawText(ctx, str, axisX, axisY,titleHeight, maxWidth) {
  // 字体
  ctx.setFontSize(14*this.rpx)
  // 颜色
  ctx.setFillStyle("#353535")
  // 文本处理
  let strArr = str.split("");
  let row = [];
  let temp = "";
  for (let i = 0; i < strArr.length; i++) {
    if (ctx.measureText(temp).width < maxWidth) {
      temp += strArr[i];
    }else {
      i--; //这里添加了i-- 是为了防止字符丢失，效果图中有对比
      row.push(temp);
      temp = "";
    }
  }
  row.push(temp); // row有多少项则就有多少行

  //如果数组长度大于2，现在只需要显示两行则只截取前两项,把第二行结尾设置成'...'
  if (row.length > 2) {
    let rowCut = row.slice(0, 2);
    let rowPart = rowCut[1];
    let test = "";
    let empty = [];
    for (let i = 0; i < rowPart.length; i++) {
      if (ctx.measureText(test).width < maxWidth) {
        test += rowPart[i];
      }
      else {
        break;
      }
    }
    empty.push(test);
    let group = empty[0] + "..."//这里只显示两行，超出的用...表示
    rowCut.splice(1, 1, group);
    row = rowCut;
  }
  // 把文本绘制到画布中
  for (let i = 0; i < row.length; i++) {
    // 一次渲染一行
    ctx.fillText(row[i], axisX, axisY + i * titleHeight, maxWidth);
  }
  // 保存当前画布状态
  ctx.save()
  // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
  ctx.draw()
},