原型要求:
要求制作一個(gè)邀請(qǐng)卡頁(yè)面，其中標(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 ：）！
廢話不說(shuō)，下面貼代碼，獻(xiàn)丑了！上代碼之前先看一下需要傳的參數(shù)！！
圖文并茂的參數(shù)說(shuō)明，原諒我捉急的PS技術(shù)和設(shè)計(jì)
- ctx： 畫布的上下文環(huán)境
- content： 需要繪制的文本內(nèi)容
- drawX： 繪制文本的x坐標(biāo)
- drawY： 繪制文本的y坐標(biāo)
- lineHeight：文本之間的行高
- lineMaxWidth：每行文本的最大寬度
- lineNum：最多繪制的行數(shù)
// 文字自動(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)出來(lái)
繪制的y坐標(biāo)為40時(shí)，可以看到文本可以完全顯示
后記
這是一個(gè)比較冷門的代碼效果，但是也希望可以幫到有需要的朋友，也希望大家多多支持腳本之家。
