匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

Javascript、CanvasのfillTextで改行したい

この記事を参考に、fillTextで文字数が一定の幅に超えたときに改行を行う処理を書きました。
http://d.hatena.ne.jp/koba04/20110603/1307029828

var text = 'テキストテキストテキストテキスト{br}テキストテキストテキストテキストテキスト',
width = 100,//fillTextする幅
size = 16,//行送り
column = [''],
line = 0;
for (var i = 0; i < text.length; i++) {
var char = text.charAt(i);

if (ctx.measureText(column[line] + char).width > width) {
line++;
column[line] = '';
}
column[line] += char;
}

for (var j = 0; j < column.length; j++) {
ctx.fillText(column[j], x, y + size*j);
}

さらにここから、{br}などの文字列が文章内に登場したときに改行を行う処理を追加したいのですが、
何か良い方法はないでしょうか。ご教授いただけると助かります。
よろしくお願いします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/05/30 10:41:36
  • 終了:2014/06/06 10:45:04

ベストアンサー

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2014/05/31 00:33:12

http://jsfiddle.net/GY68m/

var ctx = document.getElementById('canvas').getContext('2d');
var text = 'テキストテキストテキストテキスト{br}テキストテキストテキストテキストテキスト',
    width = 100, //fillTextする幅
    size = 16, //行送り
    column = [''],
    line = 0;
text = text.replace("{br}", "\n", "gm");
for (var i = 0; i < text.length; i++) {
    var char = text.charAt(i);

    if (char == "\n" || ctx.measureText(column[line] + char).width > width) {
        line++;
        column[line] = '';
    }
    column[line] += char;
}

for (var j = 0; j < column.length; j++) {
    ctx.fillText(column[j], 0, 16 + size * j);
}

改行区切りは1文字の方が都合良いので素直に"\n"に変換してます。
最初からそれで良いならそれが良いでしょう。
あとは、改行文字であれば行あふれと同じ処理させてるだけです。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません