Question

我正在制作一个html5文本启动，其中我要求文本在多行中。例如

Everything
Awesome
Is Really
Not awesome

但是要排成一行

一切真棒是真的不太好看

我无法创建换行符。对于不同的话。任何人都可以帮助我。

我创建了一个演示来展示http://cssdeck.com/labs/owxlsevi/0上的内容。任何人都可以建议我如何在不同的行中得到每个单词，如上所述。

Answer 1

不幸的是，canvas 2d上下文的fillText和strokeText方法不支持换行符。当你想要多行文本时，你必须自己做这个，将文本分成子串并用不同的y偏移分别输出。

这是一个用固定行高12像素的多行中的换行符（\ n）绘制文本的函数：

function fillMultilineText(context, text, x, y) {
    // split text at line-breaks and put the resulting sub-strings into an array
    var lines = text.split('\n');
    // draw each line with 12pixel offset
    for(var i = 0; i < lines.length; i++) {
         var line_y = y + i * 12;
         context.fillText(lines[i], x, line_y);
    }
}

以下是一些与某些解决方案相关的问题： HTML5 canvas ctx.fillText won't do line breaks?

html5在不同的行中启动文本

1 个答案: