微信小程序中的canvas文字斷行和省略號顯示功能的處理方法

<canvas canvas-id='word' id='test'></canvas>

//處理文字多出省略號顯示
  dealWords: function (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;//實際能分多少行與設置的最大顯示行數(shù)比，誰小就用誰做循環(huán)次數(shù)
    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);
      }
    }
  },

var ctx = wx.createCanvasContext('word');
var name='窗前明月光，疑是地上霜，舉頭望明月，低頭思故鄉(xiāng)。';
this.dealWords({
  ctx: ctx,//畫布上下文
  fontSize: 16,//字體大小
  word: name,//需要處理的文字
  maxWidth: 100,//一行文字最大寬度
  x: 0,//文字在x軸要顯示的位置
  y: 0,//文字在y軸要顯示的位置
  maxLine: 3//文字最多顯示的行數(shù)
})
ctx.draw();