- 小程序
在微信小程序的Canvas上绘制自动换行的文字需要进行一些计算和处理。
HTML 文件：
JavaScript 文件：
Page({
onReady() {
const ctx = wx.createCanvasContext('myCanvas');
const text = '这是一段需要换行的文字，例如用于显示长段落的文本内容。';
const maxWidth = 200; // 最大宽度，超过该宽度时需要换行
const lineHeight = 20; // 行高
const x = 10; // 文字起始点横坐标
const y = 30; // 文字起始点纵坐标
const words = text.split(' '); // 将文字分割成单词数组
let line = ''; // 当前行的文字
for (let i = 0; i maxWidth && i > 0) { // 文字超出最大宽度时换行
ctx.fillText(line, x, y); // 绘制当前行文字
line = words[i] + ' '; // 开启新的一行
y += lineHeight; // 更新文字起始点纵坐标
} else {
line = testLine; // 继续拼接文字
}
}
ctx.fillText(line, x, y); // 绘制最后一行文字
ctx.draw();
}
});在以上示例中，我们创建了一个Canvas对象，然后通过wx.createCanvasContext方法获取Canvas 2D绘图上下文对象。接着，我们设置了一些绘制文本的参数，包括要绘制的文字内容、最大宽度、行高、文字起始点的横坐标和纵坐标。
然后，我们将文本内容按空格分割为单词数组，并使用一个循环来处理每个单词。在循环中，我们将当前行的文字与单词拼接，然后使用measureText方法测量拼接后的测试行文字的宽度。如果测试行文字的宽度超过了最大宽度，并且当前不是第一个单词，就说明需要换行了。我们通过fillText方法绘制当前行的文字，并更新起始点的纵坐标和使用新的一行文字。最后，我们通过fillText方法绘制最后一行的文字。
最后，我们使用draw方法绘制所有的绘图操作。
