0

テキストを複数行にする必要があるhtml5テキストスプラッシュを作成しています。例えば

Everything
Awesome
Is Really
Not awesome

しかし、そのような一行で来ています

素晴らしいものは本当に素晴らしいものではありません

改行を作成できません。さまざまな言葉で.誰かがこれを手伝ってくれますか.

http://cssdeck.com/labs/owxlsevi/0で何が起こっているかを示すデモを作成しました。上で指定したように、各単語を別の行に取得する方法を教えてください。

4

1 に答える 1

0

残念ながら、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 は改行を行いませんか?

于 2012-12-17T12:17:58.520 に答える