Firefox 3.1で強化されるHTML 5対応--Canvas Text APIを検証

杉山貴章（オングス）
2008-08-18 07:00:00
Firefox 3.1の開発が進む中、MozillaWikiにShiretokoのHTML 5対応が明記された。今回はその中からCanvas Text APIを検証してみたい。
最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

　前ページのリスト1をFirefox 3.1 Alpha 1で表示すると、図1のようになる。

図1 図1

　文字が小さいが、これはデフォルトのフォントサイズが10ptになっているため。フォントはfontプロパティで設定する。この値は、CSSのfontプロパティと同様のフォーマットで指定できる。

　したがって、例えばリスト2のように設定すれば、表示は図2のように変わる。2行目はstrokeText()メソッドに指定した最大幅をオーバーしているので、幅が収まるように修正されている。

リスト2 フォントを指定






  
    
    
    
    
    Canvas Text APIのサンプル

    
  

  

    
Canvasに文字を書く
図2 図2
※ブラウザで表示を確認する

　measureText()メソッドは指定されたテキストがCanvasに描画された際の幅を計算するメソッドである。このメソッドを実行すると、TextMetricsオブジェクトが返される。このオブジェクトのwidthプロパティにテキストの幅が保持されるため、これを調べることで指定したテキストが描画された際の幅がわかる。

　次回はCanvas Text APIでテキストの位置を指定する方法、およびCanvas上の図形に影を付けるCanvas Shadow APIを紹介する。

  • 新着記事
  • 特集
  • ブログ