FC2ブログ

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
一番下
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック