小程序 canvas繪製多行文字多餘的省略號表示

下面這個方法是返回有幾行：

/**
 * canvas繪圖相關，把文字轉化成只能行數，多餘顯示省略號
 * ctx: 當前的canvas
 * text: 文本
 * contentWidth: 文本最大寬度
 * lineNumber: 顯示幾行
 */
function transformContentToMultiLineText(ctx, text, contentWidth, lineNumber) {
  var textArray = text.split(""); // 分割成字符串數組
  var temp = "";
  var row = [];

  for (var i = 0; i < textArray.length; i++) {
    if (ctx.measureText(temp).width < contentWidth) {
      temp += textArray[i];
    } else {
      i--; // 這裏添加i--是爲了防止字符丟失
      row.push(temp);
      temp = "";
    }
  }
  row.push(temp);

  // 如果數組長度大於2，則截取前兩個
  if (row.length > lineNumber) {
    var rowCut = row.slice(0, lineNumber);
    var rowPart = rowCut[1];
    var test = "";
    var empty = [];
    for (var a = 0; a < rowPart.length; a++) {
      if (ctx.measureText(test).width < contentWidth) {
        test += rowPart[a];
      } else {
        break;
      }
    }
    empty.push(test); // 處理後面加省略號
    var group = empty[0] + '...'
    rowCut.splice(lineNumber - 1, 1, group);
    row = rowCut;
  }
  return row;
}

返回了有幾行以後，需要逐行繪製

var row = util.transformContentToMultiLineText(ctx, text, contentWidth, 4);
var contentTextY = 0; // 這段文字起始的y位置
var leftSpace = 0; // 這段文字起始的X位置
var textLineHeight = 20; // 一行文字加一行行間距
for (var b = 0; b < row.length; b++) {
      ctx.fillText(row[b], leftSpace, contentTextY + lineHeight * b, contentWidth);   // 內容y=155
    }