Javascript、CanvasのfillTextで改行したいこの記事を参考に、f…

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号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"に変換してます。
最初からそれで良いならそれが良いでしょう。
あとは、改行文字であれば行あふれと同じ処理させてるだけです。

この質問へのコメント

コメントはありません

Javascript、CanvasのfillTextで改行したい

ベストアンサー

匿名回答1号2014/05/31 00:33:12

その他の回答

この質問へのコメント

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

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版