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

最終更新日:2015年01月20日  (初回投稿日:2015年01月20日)

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

本日のINDEX
  1. キャンバスに文字列を描画する
    1. fillText() 、 strokeText() で指定します
    2. フォントスタイル、サイズ、書体、色、線の太さなどの指定
    3. 省略可能な引数「maxWidth」で最大幅を指定する
    4. textAlignプロパティで、横方向(x)の表示位置を指定する
    5. 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 で指定したもの。
文字の太さは bold、サイズは40px、書体はCentury Gothic にしてみました。
strokeText の線の太さは6pxに、角の状態を丸くしています。図形のときの線の指定と同じ方法で。

3行目は、strokeText と fillTextを同じ座標に重ねて、袋文字(枠付き飾り文字)にしたものです。
テキストの線と塗りは同時に指定できないけど、このように2つ重ねればOKというわけ。

	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
  2. variant:スモールキャップの指定。normal、small-caps
     (スモールキャップとは、英文字で、小文字の表示が小文字サイズの大文字のもの)
  3. weight:太さの指定。
     normal、bold、lighter、bolder、または100〜900の9段階(400がnormal)
  4. size:サイズの指定。px、pt、em、% などの単位で数値での指定など。
  5. family:書体の指定。
     sans-serif(ゴシック系)、serif(明朝系)、monospace(等幅) などのキーワード。
     または「" "」か「' '」で囲んで、フォント名で指定する。「,」で区切って複数指定OK。
  6. ctx4.font='bold 20px Century Gothic,"Hiragino Kaku Gothic ProN"';

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

サンプル2のソースをよく見ると、
6、7、8行目のテキストの指定で、x,y座標の他に、もう1つ数値が書いてあります(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です)
キャンバスからはみ出しそうな文字列に最大幅を指定して、はみ出さないようにするという場合に使うようです。

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

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

「ctx.textAlign = 'キーワード';」で、横方向(x)の表示位置を指定します。
キーワードには start、end、left、right、center の5種類があります。
デフォルト値は「start」(textAlign を指定しなければ start の位置になります)
サンプル3で、実際に指定して位置を確認してみました。

	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 25.0.1 (on Mac) のプレビューです。
この textBaselineプロパティは、まだブラウザによって表示に違いがあるようです。
例えば、Chrom、Safari で ideographic がビミョーに浮いてます。
デフォの alphabetic と middle などは、どのブラウザでも同じ位置なので使えそうです。

	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()メソッド」で、横幅サイズを取得することができます。
メジャーテキスト。読んだとおり、テキストを計測するんですね。
(幅以外も情報をゲットできるはず...らしいのですが今のところ幅(width)プロパティしか無いんだそうです)

サンプル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)の横幅になります。
(「txw1.height」とかやってみたけどダメだった。ホントに横幅しかまだ無いみたい)

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

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

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

次回予告

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

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.