html - 如何在 Canvas 中换行中文字体

Question

我canvas.fillText以前在画布上画中文字体，但字没有换行。我在这里阅读了画布教程，但它使用空格分割单词，这不适用于中文字体。有人可以对此有经验还是告诉我在哪里可以找到解决方案？

谢谢你。

Answer 1

您将需要measureText()通过添加一个和一个字形来使用 来测量线宽，直到您获得的值超过您包装文本的可用空间。

例如 - 我制作了这个循环，当没有更多可用空间时将换行：

在线演示在这里

var txt = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
    i = 0, ...;

/// loop trough the txt which holds the string
for(; i < txt.length; i++) {

    /// measure current width
    lw = ctx.measureText(line).width;

    /// if within available space add a char to line
    if (lw < w - ctx.measureText(txt[i]).width) {
        line += txt[i];

    } else {
        /// didn't fit so draw what we have
        ctx.fillText(line, x, y);

        /// reset line with the left-over char
        line = txt[i];

        /// reset x (not used in demo) and increment y position
        x = 0;
        y += 50;
    }
}

/// if anything was left in line draw it here
if (line.length > 0) ctx.fillText(line, x, y);

PS：我没有方便演示的中文字体，但你会看到原理。