html - html5 在不同的行中启动文本

Question

我正在制作一个 html5 文本飞溅，其中我要求文本位于多行中。例如

Everything
Awesome
Is Really
Not awesome

但是要排成一行，这样

一切很棒的东西真的不很棒

我无法创建换行符。对于不同的单词。任何人都可以帮我解决这个问题。

我创建了一个演示来展示http://cssdeck.com/labs/owxlsevi/0上的内容。任何人都可以建议我如何像我上面指定的那样在不同的行中获取每个单词。

Answer 1

不幸的是，canvas 2d 上下文的 fillText 和 strokeText 方法不支持换行符。当您需要多行文本时，您必须自己通过将文本拆分为子字符串并使用不同的 y 偏移量分别输出它们来执行此操作。

这是一个函数，它在多行中绘制带有换行符 (\n) 的文本，由 12 像素的固定行高分隔：

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?