CanvasRenderingContext2D.font

この記事内

構文
1. オプション
例
1. font プロパティの使用例
  1. HTML
  2. JavaScript
2. CSS Font Loading API でフォントを読み込む
仕様
ブラウザ実装状況
Gecko 固有の注意事項
関連情報

Canvas 2D API の CanvasRenderingContext2D.font プロパティは、テキストを描画するときに用いられる現在のテキストスタイルを指定します。この文字列は CSS font 記述子 (specifier) と同じ構文を用います。デフォルトフォントは 10px のサンセリフ (sans-serif) です。

構文

ctx.font = value;

オプション

value: CSS font の値としてパースされる DOMString。デフォルトのフォントは 10px sans-serif です。

例

`font` プロパティの使用例

さまざまなフォントサイズやフォントファミリーを設定するために font プロパティを使用する、シンプルなコードスニペットです。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.strokeText("Hello world", 50, 100);

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

Playable code

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="編集" />
  <input id="reset" type="button" value="リセット" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.strokeText("Hello world", 50, 100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

CSS Font Loading API でフォントを読み込む

FontFace API の助力により、canvas で使用する前にフォントを明示的に読み込むことができます。

var f = new FontFace("test", "url(x)");
  f.load().then(function() {
    // canvas コンテキストでフォントを使用する準備ができた
});

仕様

仕様書	策定状況	コメント
WHATWG HTML Living Standard CanvasRenderingContext2D.font の定義	現行の標準

機能	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
基本サポート	(有)	3.5 (1.9.1)	9	(有)	(有)

機能	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
基本サポート	(有)	(有)	1.0 (1.9.1)	(有)	(有)	(有)

Gecko 固有の注意事項

Firefox など Gecko ベースのブラウザではこのプロパティのほかに、非標準かつ非推奨の ctx.mozTextStyle を実装しています。これは使用しないでください。

ドキュメントのタグと貢献者

タグ:

このページの貢献者: yyss

最終更新者: yyss, 2016/08/30 7:49:53