canvasへ文字を描画

canvasへ文字を描画
canvasへ文字文字の描画ができるので
これを使えばテキストへグラデーションを付けたり
図形の変形もできる
描画できる文字は、通常の文字と
袋文字
袋文字は、輪郭を線で構成した文字のこと
文字を塗り潰す色、つまり文字の色は
fillStyleで指定する
なぜ、塗り潰すという表現になるかというと
ポスターなどの文字でレタリングで
中を塗り潰すのとおなじで文字を枠で描き
中身を塗り潰すから
描画する文字サイズや書体は、
fontプロパティで行う
設定はCSSとおなじ要領
コードにすると
context.font=”normal bold 64pt ‘italic'”;
ここまでで、下準備は完成
あとは、文字の描画
文字の描画には、fillText()を使う
fillText()の構文は
fillText(
“表示したい文字”,
X座標,
Y座標
)
となる
このときの注意点として、Y座標が
文字の一番上ではなく
ベースラインと呼ばれる位置を基準にしているということ
なのでYを0にすると
場合によっては下半分しかでないこともある
ベースラインの設定は
textBaselineプロパティで設定できる
例を書くと
top文字の一番上
hanging
一番上と真ん中の間
middle
文字の真ん中
alphabetic
真ん中とideographicの間
ideographic
alphabeticと一番したの間
bottom
一番下