如何在Canvas中包装中文字体

Question

我使用canvas.fillText在画布上绘制中文字体，但是这些字没有换行。我阅读了画布教程here，但它使用空格分割单词，这对中文字体不起作用。有人可以有这方面的经验或只是告诉我在哪里找到解决方案？

谢谢。

Answer 1

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

例如 - 我做了这个循环，当没有更多可用空间时，它将包裹该行：

<强> ONLINE DEMO HERE

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：我没有方便的中文字体，但你会看到原理。