原型要求:
要求制作一個(gè)邀請(qǐng)卡頁面，其中標(biāo)題字?jǐn)?shù)是動(dòng)態(tài)的，最多可顯示2行，如果超出2行則第2行內(nèi)容結(jié)尾添加省略號(hào)。根據(jù)產(chǎn)品妹子的性格，四行這個(gè)設(shè)置到時(shí)很大機(jī)會(huì)改，所以這里一定不能寫死，結(jié)果前幾天真的要求改成了最多可顯示4行 ，其他照舊。產(chǎn)品妹子too young ：）！
廢話不說，下面貼代碼，獻(xiàn)丑了！上代碼之前先看一下需要傳的參數(shù)??！
圖文并茂的參數(shù)說明，原諒我捉急的PS技術(shù)和設(shè)計(jì)
// 文字自動(dòng)換行
function textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
var drawTxt = ''; // 當(dāng)前繪制的內(nèi)容
var drawLine = 1; // 第幾行開始繪制
var drawIndex = 0; // 當(dāng)前繪制內(nèi)容的索引
// 判斷內(nèi)容是否可以一行繪制完畢
if(ctx.measureText(content).width <= lineMaxWidth) {
ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
} else {
for (var i = 0; i <= content.length; i++) {
drawTxt += content[i];
if (ctx.measureText(drawTxt).width > lineMaxWidth) {
if (drawLine === lineNum) {
// 最后一行添加省略號(hào)
ctx.fillText(content.substring(drawIndex, i) + '...', drawX, drawY);
break;
} else {
// 不是最后一行的情況
ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
drawIndex = i + 1; // 記錄當(dāng)前行最后一個(gè)字符串的下一個(gè)idnex，用于繪制下行第一個(gè)字
drawLine += 1; // 行數(shù)+1
drawY += lineHeight; // 繪制內(nèi)容的y坐標(biāo)對(duì)應(yīng)增加行高
drawTxt = ''; // 重置繪制的內(nèi)容
}
}
}
}
}
意外發(fā)現(xiàn)
在繪制文字的過程中發(fā)現(xiàn)，繪制文字的y坐標(biāo)是不是以文字上方做標(biāo)準(zhǔn)，一圖勝多言，上圖！
瀏覽器環(huán)境： chrome 71.0.3578.98（正式版本）（64 位）
字體大小為40px
繪制的y坐標(biāo)為0時(shí)，可以看到文本再左上角只漏了一點(diǎn)點(diǎn)出來
繪制的y坐標(biāo)為40時(shí)，可以看到文本可以完全顯示
后記
這是一個(gè)比較冷門的代碼效果，但是也希望可以幫到有需要的朋友，也希望大家多多支持腳本之家。
標(biāo)簽：紅河 文山 營(yíng)口 咸陽 蘇州 甘南 惠州 萍鄉(xiāng)
巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《canvas繪制文本內(nèi)容自動(dòng)換行的實(shí)現(xiàn)代碼》，本文關(guān)鍵詞 canvas,繪制,文本,內(nèi)容,自,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
