先看下效果圖：

程式碼如下，後面解釋（小程式為例）

content = "canvas的繪製文字自動換行 By Frank";

const ctx = wx.createCanvasContext('canvas');
ctx.setFontSize(18);//字型大小
ctx.setFillStyle('#666') // 文字顏色
ctx.setTextAlign('center') //水平對齊

let canvasWidth = 100; //畫布寬度
let canvasHeight = 300; //畫布寬度
let textareaWidth = Math.ceil(canvasWidth/18); //畫布寬度除以字號
let text = [];//存放切割後的內容

for (let i = 0; i < content.length; i++) {
	 text.push(content.substr(0, textareaWidth ))
 	 content = content.substr(textareaWidth, content.length)
}

//設定文字垂直居中
for (let i = 0; i < text.length; i++) {
  	let h = 0;
  	switch (text.length){
	    case 1:
		      h = (canvasWidth/ 100) * (i + 1 * 22) + (i * 20);
		      break;
	    case 2:
		      h = (canvasWidth/ 100) * (i + 1 * 20) + (i * 20);
		      break;
	    case 3:
		      h = (canvasWidth/ 100) * (i + 1 * 17) + (i * 20);
		      break;
  	}
  	ctx.fillText(text[i], canvasWidth/ 2, h)
}
 

解釋：

1、設定字號、計算一行畫布可繪製多少文字

let textareaWidth = Math.ceil(canvasWidth/18); //畫布寬度除以字號

這句程式碼可以得到當前畫布的寬度可以最多可以有幾個字，當然，為了樣式的美觀，我們可以在canvasWidth減去內邊距，例如：

let canvasWidth = 100;
let marginWidth  = canvasWidth  - 20 //畫布寬度 - 20內邊距  canvasWidth不要修改，水平時居中要用到
let textareaWidth = Math.ceil(marginWidth/18); 

2、按畫布的寬度切割文字

let text = [];//存放切割後的內容
for (let i = 0; i < content.length; i++) {
	 text.push(content.substr(0, textareaWidth ))
 	 content = content.substr(textareaWidth, content.length)
}

這裡將文字按照畫布的寬度切割成一行存入陣列中。或者你也可以不儲存，在迴圈中也可以直接繪製到畫布，但是多行文字不會垂直居中。程式碼如下： （參照效果圖中暱稱下的介紹文字）

for (let i = 0; i < content.length; i++) {
	 let text = content.substr(0, textareaWidth );
 	 content = content.substr(textareaWidth, content.length)
 	 ctx.fillText(text, canvasWidth/ 2, (canvasWidth/ 67)+ (15*i)) 
}
 

canvasWidth/ 2為設定水平居中， (canvasWidth/ 67)文字所在的高度 +(15*i)定義文字的行高

3、設定文字垂直居中

for (let i = 0; i < text.length; i++) {
  	let h = 0;
  	switch (text.length){
	    case 1:
		      h = (canvasHeight / 100) * (i + 1 * 22) + (i * 20);
		      break;
	    case 2:
		      h = (canvasHeight / 100) * (i + 1 * 20) + (i * 20);
		      break;
	    case 3:
		      h = (canvasHeight / 100) * (i + 1 * 17) + (i * 20);
		      break;
  	}
  	ctx.fillText(text[i], canvasWidth/ 2, h)
}

因為在博主的業務需求中最長的文字也不會超過3行，所以這裡只需做個判斷，來給第1行設定起始位置（y座標）。

 h = (canvasHeight / 100) * (i + 1 * 17) + (i * 20);

(i + 1 * 17) 為當前行的起始位置（y座標） (i * 20) 為行距

這裡其實還是需要優化的，目前博主能力有限暫時這樣寫。