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

テキストを中央寄せする方法

Canvasでテキストを中央寄せしたい場合は、measureText()でテキストの幅を取得して、水平位置を調整しましょう。

サンプルコード

下記は、200x200のcanvasでテキストを中央寄せするサンプルコードです。テキストの幅はコンテキストのmeasureText()で取得できます。

1つの行

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

var text = "SYNCER" ;
var fontSize = 24 ;

context.beginPath () ;

context.font = "bold " + fontSize + "px Arial, meiryo, sans-serif" ;
var textWidth = context.measureText( text ).width ;

context.fillText( text, (200 - textWidth) / 2, fontSize ) ;

複数行

複数行のテキストを、各行ではなく全体で中央寄せしたい場合は、横幅が一番大きい行を計算の基準としましょう。各行それぞれの幅に合わせた中央寄せでいいなら、前章とやり方は変わりません。

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

var text = "A" + "\n" + "BB" + "\n" + "CCC" ;
var fontSize = 24 ;
var lineHeight = 1.1618 ;
var lines=text.split( "\n" ) ;

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

// 最も広い横幅を取得
for( var maxTextWidth=0, i=0, l=lines.length; l>i; i++ ) {
	maxTextWidth = Math.max( maxTextWidth, context.measureText( lines[i] ).width ) ;
}

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, (200 - maxTextWidth) / 2, addY ) ;
}

デモ

1行

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

// <input id="target">
var text = document.getElementById( "target" ).value ;
var fontSize = 24 ;

context.beginPath () ;

context.font = "bold " + fontSize + "px Arial, meiryo, sans-serif" ;
var textWidth = context.measureText( text ).width ;

context.fillText( text, (200 - textWidth) / 2, fontSize ) ;

200x200のキャンパスです。

複数行

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

// <textarea id="target"></textarea>
var text = document.getElementById( "target" ).value ;
var fontSize = 24 ;
var lineHeight = 1.1618 ;
var lines=text.split( "\n" ) ;

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

for( var maxTextWidth=0, i=0, l=lines.length; l>i; i++ ) {
	maxTextWidth = Math.max( maxTextWidth, context.measureText( lines[i] ).width ) ;
}

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, (200 - maxTextWidth) / 2, addY ) ;
}

200x200のキャンパスです。

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