javascript - 文本在 <canvas> 元素中换行

Question

我正在尝试使用 <canvas> 在图像上添加文本元素。首先绘制图像，然后在图像上绘制文本。到目前为止一切顺利。

但我面临的问题是，如果文本太长，它会在开始和结束时被 Canvas chop 。我不打算调整 Canvas 的大小，但我想知道如何将长文本换行成多行以便显示所有内容。谁能指出我正确的方向？

Answer 1

@mizar 答案的更新版本，修复了一个严重错误和一个小错误。

function getLines(ctx, text, maxWidth) {
    var words = text.split(" ");
    var lines = [];
    var currentLine = words[0];

    for (var i = 1; i < words.length; i++) {
        var word = words[i];
        var width = ctx.measureText(currentLine + " " + word).width;
        if (width < maxWidth) {
            currentLine += " " + word;
        } else {
            lines.push(currentLine);
            currentLine = word;
        }
    }
    lines.push(currentLine);
    return lines;
}

我们已经使用这段代码一段时间了，但今天我们试图弄清楚为什么有些文本没有绘制，我们发现了一个错误!

事实证明，如果你给 getLines() 函数一个单词(没有任何空格)，它会返回一个空数组，而不是只有一行的数组。

当我们对此进行调查时，我们发现了另一个(更微妙的)错误，其中线条最终可能比它们应该的长度略长，因为原始代码在测量线条的长度时没有考虑空格。

我们的更新版本，适用于我们投入的所有内容，就在上面。如果您发现任何错误，请告诉我!