プロ生ちゃんとお勉強するよ~

プロ生ちゃんと一緒にプログラミングをお勉強できるサイトです。

テキストを描画する

HTML5でCanvasへテキストを描画する方法について勉強するね!!。

テキストの描画は、ctx.filltext関数で行います。

書式 - filltext

    ctx.filltext( "テキスト", x, y [, maxWidth] );

"テキスト"の部分には、描画したいテキストの内容を指定します。xとyは、 テキストを描画開始するx座標、y座標を指定します。maxWidthは省略可能で、テキストを描画する際の最大幅を指定します。 maxWidthについては、後で詳しく説明するね!!。

では、実際にテキストを描画してみましょう。

    ctx.font = "48px Meiryo";
    ctx.fillStyle = "#0000ff";
    ctx.fillText( "Happy Smile", 50, 30 );

  • フォントは、"Meiryo"で、文字の高さは48px
  • テキストの色は青色
  • 描画内容は"Happy Smile"
  • 描画位置は、x座標が50、y座標が30

描画されました....あれ!? でも文字がはみ出ていますね。

実は、filltextで指定した描画開始座標のy座標は、何も指定しないと文字のbaselineの位置から描画されます。 指定した文字の高さが48pxに対して、y座標が30だったので上方向へはみ出てしまいました。

(赤色の線と緑色の線が交差している位置が、x座標が50、y座標が30の位置です)

今度は、もう少しy座標を増やしてを描画してみましょう。

    ctx.font = "48px Meiryo";
    ctx.fillStyle = "#0000ff";
    ctx.fillText( "Happy Smile", 50, 50 );

  • フォントは、"Meiryo"で、文字の高さは48px
  • テキストの色は青色
  • 描画内容は"Happy Smile"
  • 描画位置は、x座標が50、y座標が50

今度は、画面内に収まるように描画されました。

テキストの描画はうまくいきましたが、文字の描画開始位置がbaselineの位置では、ちょっと使いにくいと感じたのでは無いでしょうか。

実は、filltextで指定する描画開始座標を文字のどの位置にするかは、水平方向、垂直方向ともに指定することができるんだよ!!。

まずは、垂直方向から説明するね。 垂直方向の描画開始位置を指定するには、ctx.textBaseline属性を設定します。何も指定しないと、textBaseline属性は"alphabetic"になっています。

書式 - textBaseline

    ctx.textBaseline = "キーワード";

キーワードと文字の垂直位置の関係

w3cの原文

キーワード 位置
top top of em square
hanging hanging baseline
middle middle
alphabetic alphabetic baseline
ideographic ideo graphic baseline
bottom bottom of em Square

それぞれの位置で描画すると、垂直位置はこんな感じになるよ。 "Happy Smile"が指定したy座標(赤い線)に対して描画される位置が変化していることに着目してね!!。

一般的で扱いやすいのは、やっぱり"top"だよね。でも、せっかく選択できるので、覚えておいて色々なケースで使い分けてね!!。

こんどは、水平方向を説明するね。 水平方向の描画開始位置を指定するには、ctx.textAlign属性を設定します。何も指定しないと、textAlign属性は"start"になっています。

書式 - textAlign

    ctx.textAlign = "キーワード";

キーワード 位置
start テキストの進む方向の先頭
end テキストの進む方向の終端
left テキストの左端
center テキストの中心
right テキストの右端

startとendは、テキストの進む方向に対して決定されます。横書きで左から右に進む場合は、startは左端、endは右端になります。 縦書きの文章の場合で、上から下に進む場合は、startは上端、endは下端になります。

それぞれの位置で描画すると、水平位置はこんな感じになるよ。

縦書きなどを意識しなければ、"left"が一般的かな?

それでは、filltextの4つ目の引数の"maxWidth"について説明するね!!。

maxWidthは、テキストを描画する際の最大幅を指定します。filltext関数は、テキストを描画する際にmaxWidthで指定した幅を超えて描画することはありません。 テキストの幅がmaxWidthよりも小さい場合は、拡大されることは無く何もしません。

では、動作を見てみましょう。

    ctx.font = "bold 48px Meiryo";
    ctx.fillStyle = "#0000c0";
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    ctx.fillText( "Happy Smile", 0, 0 );
    ctx.fillText( "Happy Smile", 0, 60, 240 );
    ctx.fillText( "Happy Smile", 0, 120, 120 );

1つ目がmaxWidthの指定無し、2つ目がmaxWidthを240、3つ目がmaxWidthを120に設定しています。 解りやすくする為に、120pxの位置に緑の線、240pxの位置に赤い線を引いています。

maxWidthを指定しない方は、ふつうに描画されましたが、maxWidthを指定した方は、文字が小さくなってしまいました。

そうです。maxWidthで指定した幅を超えないように、文字の幅を自動的に調整して描画されるのです。

少し意地悪をして、maxWidthに10pxを設定してみました。

あれれ、文字が潰れてしまいました...。

maxWidthは、自動的に文字幅が調整されますが、あまり極端なサイズだと文字が潰れて読めなくなってしまうので注意してね!!。

maxWidthは、自動的に文字の幅を調整してくれるので、どうしてもこの枠に収めたいみたいなケースでは使えそうです。

少し長くなりましたが、HTML5のCanvasへのテキストの描画について説明しました。理解できましたか?

解らなかったらもう一度読み直してみてね!!。

本キャラクターに関する著作権およびその他一切の権利は、プログラミング生放送および、それらの関連企業・関係者に帰属しています。これは、著作権およびその他一切の権利を放棄・譲渡するものではありません。





プロ生ちゃんとお勉強するよ~

プロ生ちゃんと一緒にプログラミングをお勉強できるサイトです。