ブログ内検索

by Futomi Hatano

Canvasにテキストを描画するText APIが追加される

whatwg の HTML5 ドラフトに Canvas の Text API が追加されました。これまで Canvas でテキストを直接描く方法がなかっただけに、待ち望まれた仕様といえるでしょう。

http://www.whatwg.org/specs/web-apps/current-work/#text

当初 Canvas には文字を描く API がありませんでした。Firefox 3 では、Canvas でテキスト描画を扱うための独自のメソッドが用意されています(詳細は「Drawing text using a canvas」をご覧ください)。しかし、他のブラウザには同様の機能がないため、これまで Canvas で文字を表現するためには、おもに以下の方法が使われてきました。

画像ファイルを使う方法は、動的にテキストを挿入できないという問題があり、柔軟性に欠けました。また、DOM を使う方法は、Canvas の図形として認識されているわけではなく、Canvas とは独立した HTML 要素として、Canvas 上に重ね表示しているにすぎません。そのため、文字の上に Canvas で描く図形を重ねるといったことはできませんでした。当サイトで配布しているグラフ描画の JavaScript ライブラリは、文字を表現するために、この DOM を採用しています。

whatwg のドラフトに新たに追加された Canvas の 2D コンテキストのプロパティやメソッドをまとめてみました。

context.font
CSS の font プロパティと同じように、Canvas に表示したいテキストのスタイルを指定できる。
context.textAlign
start, end, left, right, center のいずれかを指定してテキストの水平位置を指定できる。
context.textBaseline
top, hanging, middle, alphabetic, ideographic, bottom のいずれかを指定して、テキストのベースラインを指定できる。
context.fillText(text, x, y, maxWidth)
context.strokeText(text, x, y, maxWidth)
これらのメソッドは、テキストと座標を指定することでテキストを描画する。maxWidth はオプションで、これが指定されると、フォントを変更したり小さくするなどして、テキストがその幅に収まるようにする。
context.measureText(text)
テキストを指定すると、TextMetrics オブジェクトが返る。TextMetrics オブジェクトには width プロパティが規定される。これにより、Canvas に指定したテキストが描かれた際の幅を知ることができる。

特に measureText メソッドについては、私自身も以前から欲しいと思っていました。仕様を見る限り、恐らく、こんな具合にコードを書いて、テキストの幅が得られるのでしょう。

var tm = ctx.measureText("あいうえお");
var w = tm.width; /* "あいうえお"がCanvasに描かれた際の幅 */

この Canvas の Text API が各ブラウザに実装されれば、これまで以上に幅広い分野に Canvas が役に立ちそうですね。

この投稿は 2008年5月9日 金曜日 11:49 AM に Canvas カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 現在コメント、トラックバックともに受け付けておりません。

コメントは受け付けていません。