スポンサーリンク

描画-文字

文字を書く

24行目から25行目のようにコードを記述しブラウザで表示してください。

25行目の「fillText()」命令が文字を書く命令です。

フォント設定

文字が小さいのでサイズやフォントを変更します。25行目に次の「font」命令を追加してください。

文字サイズが大きくなりフォントも変更されました。fontの設定内容はCSSのfontプロパティと同じになります。

文字の横幅の最大を決めたい場合は「fillText()」命令の第4引数へ最大値を設定します。確認のため26行目のように最大値を設定し表示してみます。

横位置の調整

文字の横位置を「textAlign」の設定で、左寄せ、中央、右寄せで表示できます。次のコードで確認します。

上からright、left、center指定しています。真ん中の赤いラインは「fillText()」命令で指定した横位置です。この横位置を基準として文字位置が寄せられます。

縦位置の調整

文字の縦位置表示をtextBaselineの設定で、上、中央、下で調整できます。次のコードで確認します。

上からtop,middle,bottom指定しています。真ん中の赤い線は「fillText()」命令で指定した縦位置です。この縦位置を基準として文字位置が調整されます。

輪郭のみ書く

「strokeText()」命令で輪郭のみ書くことができます。

横、縦幅取得

「measureText()」命令を利用すると描画した文字の横、縦幅を取得することができます。

これを利用して描画した文字の横や下に文字を追加表示できます。




これでcanvasに描画することができました。次のステップに進みます。

タイトルとURLをコピーしました