Canvasでのテキスト表示

JavaScriptのCanvasは図形や画像だけではなくテキストも表示することもできます。
Canvasでテキストを扱うにはfillTextメソッドやstrokeTextメソッドを利用します。

fillTextメソッド

fillTextメソッドは図形描写のプロパティであるfillStyleと同様に文字を塗りつぶしたテキストを表示します。（つまりは普通のテキストです）
書式は次のようになります

ct.fillText("表示するテキスト", 横方向の座標, 縦方向の座標)

座標の扱いは図形描写と同じです。

strokeTextメソッド

strokeTextメソッドは図形描写のプロパティであるstrokeStyleと同様に輪郭だけのテキストを表示します。
書式は次のようになります

ct.strokeText("表示するテキスト", 横方向の座標, 縦方向の座標)

基本的にfillTextメソッドと同じです。
また図形描写と同様に輪郭の太さをlineWidthプロパティで指定できます。

スタイルとフォント

表示されるテキストは図形描写と同様にfillStyleプロパティやstrokeStyleプロパティでスタイルを指定できます。
また、文字のサイズやフォントを指定できるfontプロパティもあります。
fontプロパティの書式は次のようになります

ct.font = "テキストの大きさ 使用するフォント";




今回の例ではフォントsans-serif（ゴシック体）とserif（明朝体）を用いています。