この記事を参考に、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}などの文字列が文章内に登場したときに改行を行う処理を追加したいのですが、
何か良い方法はないでしょうか。ご教授いただけると助かります。
よろしくお願いします。
No.1
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"に変換してます。
最初からそれで良いならそれが良いでしょう。
あとは、改行文字であれば行あふれと同じ処理させてるだけです。
3
4
2
コメント（0件)