人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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/1件

▽最新の回答へ

1 ● 匿名回答1号
ベストアンサー

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

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ