HTML5 canvas ctx.fillText 不会换行？

Question

如果文本包含“\n”，我似乎无法将文本添加到画布。我的意思是，换行符不显示/工作。

 ctxPaint.fillText("s  ome \n \\n <br/> thing", x, y);

上面的代码将在一行中绘制 "s ome \n <br/> thing" 。

这是 fillText 的限制还是我做错了？ “\n”在那里，但没有打印出来，但它们也不起作用。

原文由 Spectraljump 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

恐怕这是 Canvas 的限制 fillText 。没有多行支持。更糟糕的是，没有内置的方法来测量行高，只能测量宽度，这让你自己做起来更加困难！

很多人都编写了自己的多行支持，也许最著名的项目是 Mozilla Skywriter 。

您需要做的事情的要点是多次 fillText 调用，同时每次将文本的高度添加到 y 值。 （我相信，测量 M 的宽度是 skywriter 人用来近似文本的方法。）

原文由 Simon Sarris 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您只想处理文本中的换行符，您可以通过在换行处拆分文本并多次调用 fillText() 来模拟它

像 http://jsfiddle.net/BaG4J/1/ 这样的东西

 var c = document.getElementById('c').getContext('2d');
c.font = '11px Courier';
    console.log(c);
var txt = 'line 1\nline 2\nthird line..';
var x = 30;
var y = 30;
var lineheight = 15;
var lines = txt.split('\n');

for (var i = 0; i<lines.length; i++)
    c.fillText(lines[i], x, y + (i*lineheight) );

 canvas{background-color:#ccc;}

 <canvas id="c" width="150" height="150"></canvas>

---

我刚刚做了一个包装概念证明（ _在指定宽度处绝对包装。还没有处理断词_）

示例位于 http://jsfiddle.net/BaG4J/2/

 var c = document.getElementById('c').getContext('2d');
c.font = '11px Courier';

var txt = 'this is a very long text to print';

printAt(c, txt, 10, 20, 15, 90 );

function printAt( context , text, x, y, lineHeight, fitWidth)
{
    fitWidth = fitWidth || 0;

    if (fitWidth <= 0)
    {
         context.fillText( text, x, y );
        return;
    }

    for (var idx = 1; idx <= text.length; idx++)
    {
        var str = text.substr(0, idx);
        console.log(str, context.measureText(str).width, fitWidth);
        if (context.measureText(str).width > fitWidth)
        {
            context.fillText( text.substr(0, idx-1), x, y );
            printAt(context, text.substr(idx-1), x, y + lineHeight, lineHeight,  fitWidth);
            return;
        }
    }
    context.fillText( text, x, y );
}

 canvas{background-color:#ccc;}

 <canvas id="c" width="150" height="150"></canvas>

---

以及一个自动换行（ _在空格处打断_）的概念证明。

http://jsfiddle.net/BaG4J/5/ 的示例

 var c = document.getElementById('c').getContext('2d');
c.font = '11px Courier';

var txt = 'this is a very long text. Some more to print!';

printAtWordWrap(c, txt, 10, 20, 15, 90 );

function printAtWordWrap( context , text, x, y, lineHeight, fitWidth)
{
    fitWidth = fitWidth || 0;

    if (fitWidth <= 0)
    {
        context.fillText( text, x, y );
        return;
    }
    var words = text.split(' ');
    var currentLine = 0;
    var idx = 1;
    while (words.length > 0 && idx <= words.length)
    {
        var str = words.slice(0,idx).join(' ');
        var w = context.measureText(str).width;
        if ( w > fitWidth )
        {
            if (idx==1)
            {
                idx=2;
            }
            context.fillText( words.slice(0,idx-1).join(' '), x, y + (lineHeight*currentLine) );
            currentLine++;
            words = words.splice(idx-1);
            idx = 1;
        }
        else
        {idx++;}
    }
    if  (idx > 0)
        context.fillText( words.join(' '), x, y + (lineHeight*currentLine) );
}

 canvas{background-color:#ccc;}

 <canvas id="c" width="150" height="150"></canvas>

---

在第二个和第三个示例中，我使用了 measureText() 方法，该方法显示打印时字符串的长度（ 以像素 为单位）。

原文由 Gabriele Petrioli 发布，翻译遵循 CC BY-SA 3.0 许可协议