[69-8] Canvasでテキストを描画しよう

今回は、<canvas>要素に「テキスト（文字列）」を描画してみます。
過去記事の「[69-2] canvasに基本的な図形を描こう」で、円グラフの中に文字を入れていますね。今日はその文字の入れ方です。

本日のINDEX

1. テキストは fillText() と strokeText() で指定します
   1. フォントスタイル、サイズ、書体、色、線の太さの指定
   2. 引数「maxWidth」で最大幅を指定する（省略可能）
   3. textAlignプロパティで、横方向（x）の表示位置を指定する
   4. textBaselineプロパティで、縦方向（y）の表示位置を指定する
2. 描画した文字列の情報を測定する measureText()
   1. measureText() を使って、文字列にアンダーラインや背景ボックスを

テキストは fillText() と strokeText() で指定します

fillText( '文字列' , x , y ) ; で塗りのテキスト、
strokeText( '文字列' , x , y ) ; でアウトラインのテキストを指定します。
「' '」で囲んで描きたい文字列を指定します。
x,y は、テキストを描き始める x座標、y座標。整数で指定します。

サンプル1の 1、2行目は、必要最低限の指定だけした、デフォルトの状態です。
クリックで別ウィンドウでサンプルが開きます。

デフォルトでは、サイズは10px、書体はsans-serif、色は黒になるのがわかります。
strokeText の線幅はデフォルトは1pxです。
2行目は文字が小さくて線が潰れちゃってるので、3、4行目は、わかりやすいようにサイズを大きくして色を付けてみました。（サイズや色の指定については次項で詳細）

1行目の描き始めの x座標は 10px、y座標は 15px にしています。
文字列なので、図形と違って「横方向の整列（textAlign）」「ベースライン（textBaseline）」がありますが、デフォルトでは「横方向の整列（textAlign）」は頭揃え（左揃え）、「ベースライン（textBaseline）」が文字列の下部であることがわかります。（textAlign、textBaselineについては後半で詳細）

    ctx1.fillText('描きたい文字列',10,15);
    ctx1.strokeText('描きたい文字列',10,30); 

フォントの太さ、サイズ、書体、色、線の太さの指定

太さ、サイズ、書体などは、「fontプロパティ」で、CSSと同じように指定します。
色、線の太さ、線の角の丸みなどは、カンバスの図形の時と同じです。

サンプル2は、1行目は fillText、2行目は strokeText で指定したもの。
3行目は、strokeText と fillTextを同じ座標に重ねて、袋文字（枠付き飾り文字）にしたものです。
テキストの線と塗りは同時に指定できないけど、このように2つ重ねればOKというわけ。
（クリックで別ウィンドウで開きます）

文字の太さは bold、サイズは40px、書体はCentury Gothic にしてみました。
strokeText の線の太さは6pxに、角の状態を丸くしています。図形のときの線の指定と同じ方法で。

	ctx2.font= 'bold 40px Century Gothic';
	ctx2.strokeStyle = '#00A3D9';
	ctx2.lineWidth = 6; 
	ctx2.lineJoin = 'round';
	ctx2.fillStyle = '#fff';
    ctx2.fillText('fillText(text,x,y[,maxWidth])',15,55,520);
	ctx2.strokeText('strokeText(text,x,y[,maxWidth])',15,115,520);
	ctx2.strokeText('fillText on strokeText',15,175,520);
	ctx2.fillText('fillText on strokeText',15,175);

ソースの1行目の「fontプロパティ」で、太さ、サイズ、書体を1度に指定しています。
これは「半角スペース」で区切る CSSの「fontのショートハンド」と同じやり方です。
「fontのショートハンド」では、最低限「font-size」と「font-family（書体名）」が必要ですが、キャンバスでも最低限この2つが必要。（例えばサイズ指定だけってのはムリ）

CSSでは「size/line-height」というカタチで指定できますが、キャンバスでは「line-height」は指定できないようでした。
style、variant、weight、size、family が指定できます。
順番もCSSと同じで、style・variant・weight は順不同で最初に、次に size、最後に familyで。

1. style：フォントスタイル。normal、italic、oblique
1. variant：スモールキャップの指定。normal、small-caps
   　（スモールキャップとは、英文字で、小文字の表示が小文字サイズの大文字のもの）
1. weight：太さの指定。
   　normal、bold、lighter、bolder、または100〜900の9段階（400がnormal）
2. size：サイズの指定。px、pt、em、% などの単位で数値での指定など。
3. family：書体の指定。
   　sans-serif（ゴシック系）、serif（明朝系）、monospace（等幅） などのキーワード。
   　または「" "」か「' '」で囲んで、フォント名で指定する。「,」で区切って複数指定OK。
   

   //fontプロパティの指定例
   ctx4.font='bold 20px Century Gothic,"Hiragino Kaku Gothic ProN"';

引数「maxWidth」で最大幅を指定する（省略可能）

サンプル2の6〜8行目のテキストの指定で、x,y座標の他に、もう１つ数値が書いてあります（520って）。

	ctx2.font= 'bold 40px "Century Gothic"';
	ctx2.strokeStyle = '#00A3D9';
	ctx2.lineWidth = 6; 
	ctx2.lineJoin = 'round';
	ctx2.fillStyle = '#fff';
    ctx2.fillText('fillText(text,x,y[,maxWidth])',15,55,520);
	ctx2.strokeText('strokeText(text,x,y[,maxWidth])',15,115,520);
	ctx2.strokeText('fillText on strokeText',15,175,520);
	ctx2.fillText('fillText on strokeText',15,175);

これは「maxWidth」という最大幅を指定できる引数です。（不用なら省略OKです）
キャンバスからはみ出しそうな文字列に最大幅を指定して、はみ出さないようにするという場合に使うようです。

ブラウザによって、文字列の表示が若干違うので、サンプルでは、1行目と2行目の文字幅を揃えようと指定してみましたが、
ブラウザによって「maxWidth」の適用のされ方も違う（Safri で効かない）ので、やっぱムダみたい。
「maxWidth」は「はみ出さないために」使うのがベストっぽいです。

8行目にも「maxWidth」を指定していますが、これは実験です。
この文字列は、520pxよりずっと幅が小さいのですが、
このように、元々「maxWidth」より小さい幅の場合は無効。（拡大はナイ！）

textAlignプロパティで、横方向（x）の表示位置を指定する

「ctx.textAlign = 'キーワード';」で、横方向（x）の表示位置を指定します。
キーワードには start、end、left、right、center の5種類があります。
デフォルト値は「start」（textAlign を指定しなければ start の位置になります）

サンプル3で、実際に指定して位置を確認してみました。
（クリックで別ウィンドウで開きます）

ソースコードはこちら。textAlignを指定してから文字列を描きます。

	ctx3.textAlign = 'start';
    ctx3.fillText('start',340,38);
	ctx3.textAlign = 'end';
    ctx3.fillText('end',340,72);
	ctx3.textAlign = 'left';
    ctx3.fillText('left',340,106);
	ctx3.textAlign = 'right';
    ctx3.fillText('right',340,140);
	ctx3.textAlign = 'center';
    ctx3.fillText('center',340,180);

textBaselineプロパティで、縦方向（y）の表示位置を指定する

「ctx.textBaseline = 'キーワード';」で、縦方向（y）の表示位置を指定します。
キーワードには top、hanging、middle、alphabetic、ideographic、bottom の6種類です。
デフォルト値は「alphabetic」（textBaseline を指定しなければ alphabetic の位置になります）

サンプル4で、実際に指定してみました。
（クリックで別ウィンドウで開きます）

上画像は Firefox (on Mac) のプレビューです。
この textBaselineプロパティはブラウザによって表示に違いがあるようです。デフォの alphabetic と middle などは、どのブラウザでも同じ位置なので使えそうです。

ソースコードはこちら。textBaselineを指定してから文字列を描きます。

	ctx4.textBaseline = 'top';
    ctx4.fillText('top_漢あmjk',120,60);
	ctx4.textBaseline = 'hanging';
    ctx4.fillText('hanging_漢あmjk',340,60);
	ctx4.textBaseline = 'middle';
    ctx4.fillText('middle_漢あmjk',560,60);
	ctx4.textBaseline = 'alphabetic';
    ctx4.fillText('alphabetic_漢あmjk',120,140);
	ctx4.textBaseline = 'ideographic';
    ctx4.fillText('ideographic_漢あmjk',340,140);
	ctx4.textBaseline = 'bottom';
    ctx4.fillText('bottom_漢あmjk',560,140);

ベースラインがどんな位置かを示す図が、W3Cの仕様書に載っていますので、転載しておきます。（クリックで該当ページにリンクします。別ウィンドウで開きます）

描画した文字列の情報を測定する measureText()

描画したテキスト全体の横幅サイズは、フォントスタイルや書体によって、また、デバイスによっても微妙に違ってしまうので、数値で指定するのはムズカシイ。

そんな時 measureText()メソッド で、文字列の横幅サイズを取得することができます。メジャーテキスト。読んだとおり、テキストを計測するんですね。

measureText() を使って、文字列にアンダーラインや背景ボックスを

サンプル5では、この「measureText()」を使って、文字列の幅をゲットして、テキストにアンダーラインや背景ボックスをつけてみました。
（クリックで別ウィンドウで開きます）

「アンダーライン」のソースコードはです。

function tDraw5() {
    var ctx5 = document.getElementById('canvas5').getContext('2d');
/*テキストの指定*/
	ctx5.font= 'bold 20px sans-serif';
/*アンダーライン*/
	var text = 'テキストにアンダーラインを描画する';
	ctx5.fillStyle = '#008C22';
	ctx5.textAlign = 'center';
	ctx5.fillText(text,340,75);
	var txw1 = ctx5.measureText(text);
	ctx5.beginPath();
	ctx5.moveTo(340-txw1.width/2,80);
	ctx5.lineTo(340+txw1.width/2,80);
	ctx5.strokeStyle = '#008C22';
	ctx5.stroke();
/*背景ボックス*/
	//省略
}

これはサンプル4までの指定と違って、文字列は「text」という変数に代入しています。（6行目）こうしておかないと、10行目の「var txw1 = ctx5.measureText(text);」で使えないから。
（「measureText()」の（）の中に 変数 text を仕込んでいます。）
この指定で、変数「txw1」に、文字列（変数text）の情報が代入されました。

で、「txw1.width」が、この文字列（変数text）の横幅になります。

このサンプルの場合、文字列をセンター合わせにしたので指定が若干複雑ですが、単純な計算です。
センター合わせ（8行目、ctx5.textAlign = 'center';）にして、その基準の x座標を340pxにしました。（9行目）
なので、アンダーラインを引く「x方向の位置」は、340（センター合わせの基準点）から「文字列の幅の半分」を引いた地点から、340に「文字列の幅の半分」を足した地点までです。
それが、上のソースの 12、13行目の指定です。

文字のy座標は75pxにしていますので、5px下にずらした80pxのところのアンダーラインが引かれるように指定しています。

「背景ボックス」をつけるほうは、サンプルのコードを見てもらえばわかるはず。
サンプルのほうに解説も付けておきました。

次回予告

カンバス上で作成できるグラフィックス（線、図形、画像、カンバス、テキスト）を今回までで、ひととおり使ってみました。
次回は、これらのグラフィックスの「変形」をやりましょう。
「拡大縮小・回転・移動・反転」などの変形を指定してみます。