小程序 canvas 绘制文本实现换行，设置字距

在小程序中，使用 canvas 绘制文本时，可以通过指定样式（如 font-size 和 line-height）来实现换行和设置字距。以下是一个示例代码，展示了如何在小程序的 canvas 中绘制文本并实现换行，同时设置字距：

const ctx = wx.createCanvasContext('myCanvas');
 
// 设置字体大小和行高
ctx.setFontSize(16);
ctx.setLineHeight(24); // 行高设置为字体大小的倍数，以保证行间距
 
// 设置字体样式，可选
ctx.setFontStyle('normal');
ctx.setFillStyle('black');
 
// 设置字间距
ctx.setTextAlign('left');
ctx.setTextBaseline('top');
 
// 绘制文本，使用 '\n' 实现手动换行
const text = '这是一段示例文本，我们希望它能够在到达指定宽度时自动换行。';
ctx.fillText(text.replace(/(\S{10})/g, '$1\n'), 10, 20);
 
// 绘制文本
ctx.draw();

在上述代码中，我们首先设置了 canvas 的字体大小和行高，并指定了字体样式和填充颜色。然后，我们通过设置 TextAlign 和 TextBaseline 来对齐文本。在 fillText 方法中，我们使用正则表达式替换每10个字符后面的空格，使得每10个字符后都会插入一个换行符 \n，从而实现手动换行。最后，调用 draw 方法将绘制内容输出到画布。

请注意，实际的换行效果还受限于 canvas 绘图区域的宽度，系统会根据字体大小、宽度和设备的屏幕宽度来自动换行。如果文本超出了绘图区域的宽度，系统会在适当的位置自动换行。