下面這個(gè)方法是返回有幾行：
/**
* canvas繪圖相關(guān)捶障，把文字轉(zhuǎn)化成只能行數(shù)简识，多余顯示省略號(hào)
* ctx: 當(dāng)前的canvas
* text: 文本
* contentWidth: 文本最大寬度
* lineNumber: 顯示幾行
*/
function transformContentToMultiLineText(ctx, text, contentWidth, lineNumber) {
var textArray = text.split(""); // 分割成字符串?dāng)?shù)組
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);
// 如果數(shù)組長(zhǎng)度大于2，則截取前兩個(gè)
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); // 處理后面加省略號(hào)
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); // 內(nèi)容y=155
}