canvas繪製文字內容自動換行的實作程式碼

要求製作邀請卡頁面，其中標題字數是動態的，最多可顯示2行，如果超出2行則第2行內容結尾添加省略號。根據產品妹子的性格，四行這個設定到時很大機會改，所以這裡一定不能寫死，結果前幾天真的要求改成了最多可顯示4行，其他照舊。產品妹子too young ：）！

廢話不說，下面貼程式碼，獻醜了！上程式碼之前先看一下需要傳的參數！ ！

圖文並茂的參數說明，原諒我捉急的PS技術與設計

• ctx： 畫布的脈絡環境
• content： 需要繪製的文字內容
• drawX： 繪製文字的x座標
• drawY： 繪製文字的y座標
• lineHeight：文字之間的行高
• lineMaxWidth：每行文字的最大寬度
• lineNum：最多繪製的行數

 // 文字自動換行function textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) { var drawTxt = ''; // 目前繪製的內容var drawLine = 1; // 第幾行開始繪製 drawIndex =var drawIndex = 0; // 目前繪製內容的索引//判斷內容是否可以一行繪製完畢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) { // 最後一行新增省略號ctx.fillText(content.substring(drawIndex, i) + '...', drawX, drawYY ); break; } else { // 不是最後一行的情況ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY); drawIndex = i + 1; // 記錄當前行最後一個字串的下一個idnex，用於繪製下行第一個字drawLine += 1; // 行數+1 drawY + = lineHeight; // 繪製內容的y座標對應增加行高drawTxt = ''; // 重設繪製的內容} } } }}

在繪製文字的過程中發現，繪製文字的y座標是不是以文字上方做標準，一圖勝多言，上圖！

瀏覽器環境： chrome 71.0.3578.98（正式版本）（64 位元）

字體大小為40px

繪製的y座標為40時，可以看到文字可以完全顯示

這是一個比較冷門的程式碼效果，但也希望可以幫到有需要的朋友，也希望大家多多支持VeVb武林網。