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

杉山貴章（オングス）
2008-08-18 07:00:00
  • このエントリーをはてなブックマークに追加

　前ページのリスト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を紹介する。

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]