HTML5 チュートリアル

HTML5 フォーム

フォント "Arial" を使用して、キャンバスへ高さ 30px の "Hello World" 書出します:

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

font 属性は、キャンバスに書くテキストの font プロパティ指定を可能にします。

font 属性は、 CSS フォント・プロパティと同じ構文を使用します。

デフォルト値:	10px sans-serif
JavaScript 構文:	context.font="italic small-caps bold 12px arial";

font 属性は、主要な全ブラウザがサポートしています。

値	説明	Play it
font-style	フォントのスタイルを指定する	Play it »
font-variant	フォントのバリアントを指定する	Play it »
font-weight	フォントの太さを指定する	Play it »
font-size/line-height	フォントサイズと行の高さを指定する	Play it »
font-family	フォントファミリを指定する	Play it »
caption	キャプション・コントロール（ボタン、ドロップダウンなど）に使用しているフォントを使用する	Play it »
icon	アイコンのラベルで使用しているフォントを使用する	Play it »
menu	ドロップダウンメニューで使用しているフォントを使用する	Play it »
message-box	ダイアログボックスで使用しているフォントを使用する	Play it »
small-caption	キャプションのフォントの縮小版	Play it »
status-bar	ステータスバーで使用しているフォントを使用する	Play it »