例
フォントを使用して、キャンバス上30px高文章を書く"Arial" ：
JavaScriptを：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50); »それを自分で試してみてください ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| font | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
フォントプロパティセットやキャンバス上のテキストコンテンツの現在のフォントプロパティを返します。
フォントプロパティは、同じ構文を使用してCSS font property 。
| デフォルト値： | 10pxのはサンセリフ |
|---|---|
| JavaScriptシンタックス： | context .font="italic small-caps bold 12px arial"; |
プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| font-style | フォントスタイルを指定します。 可能な値：
| それを再生します» |
| font-variant | フォントバリアントを指定します。 可能な値：
| それを再生します» |
| font-weight | フォントの太さを指定します。 可能な値：
| それを再生します» |
| font-size/line-height | フォントサイズと行の高さをピクセル単位で指定します | それを再生します» |
| font-family | フォントファミリを指定します。 | それを再生します» |
| キャプション | フォント字幕コントロールを使用(like buttons, drop-downs, etc.) | それを再生します» |
| アイコン | アイコンにラベルを付けるために使用されるフォントを使用します | それを再生します» |
| メニュー | メニューで使用フォント使用(drop-down menus and menu lists) | それを再生します» |
| メッセージボックス | ダイアログボックスで使用するフォントを使用します | それを再生します» |
| 小キャプション | 小さなコントロールを標識するために使用するフォントを使用します | それを再生します» |
| ステータスバー | ウィンドウのステータスバーで使用されるフォントを使用します | それを再生します» |
<Canvasオブジェクト