SYNCERのロゴ
アイキャッチ画像

複数行のテキストを描く方法

Canvasでテキストを描く時、自動で改行をしてくれません。なので、1行1行の水平位置を計算して配置しましょう。

サンプルコード

"\n"を改行文字としてテキストを複数行に分けて、それぞれの行を、水平位置を考慮しながらレンダリングするサンプルコードです。

// element = <canvas width="200" height="200"></canvas>
var context = element.getContext( "2d" ) ;

// 設定
var text = "SYNCER" + "\n" + "SYNCER" ;	// テキスト (2行)
var fontSize = 24 ;	// フォントサイズ
var lineHeight = 1.1618 ;	// 行の高さ (フォントサイズに対する倍率)
var x = 50 ;	// 水平位置
var y = 50 ;	// 垂直位置

// パスをリセット
context.beginPath () ;

// フォントを設定
context.font = "bold " + fontSize + "px Arial, meiryo, sans-serif" ;

// 1行ずつ描画
for( var lines=text.split( "\n" ), i=0, l=lines.length; l>i; i++ ) {
	var line = lines[i] ;
	var addY = fontSize ;

	// 2行目以降の水平位置は行数とlineHeightを考慮する
	if ( i ) addY += fontSize * lineHeight * i ;

	context.fillText( line, x + 0, y + addY ) ;
}

デモ

テキストや座標などを変更して、どのように反映されるか確認してみて下さい。

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

// <textarea id="text"> ... </textarea>
var text = document.getElementById( "text" ).value ;
var fontSize = 16 ;
var lineHeight = 1.1618 ;
var x = 8 ;
var y = 8 ;

context.beginPath () ;
context.font = "bold " + fontSize + "px Arial, meiryo, sans-serif" ;

for( var lines=text.split( "\n" ), i=0, l=lines.length; l>i; i++ ) {
	var line = lines[i] ;
	var addY = fontSize ;
	if ( i ) addY += fontSize * lineHeight * i ;

	context.fillText( line, x + 0, y + addY ) ;
}

200x200のキャンパスです。

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月3日 (木)
コンテンツを公開しました。