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

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

Firefox 3.1のHTML 5対応

 現在、Mozilla FoundationではFirefox 3の次期バージョンとなるFirefox 3.1(開発コード名「Shiretoko」、Geckoのバージョンは1.9.1)の開発が鋭意進められている。

 Firefox 3.1ではバグフィックスやパフォーマンス向上の他に、Firefox 3のリリースに間に合わなかったいくつかの新しい機能が実装される予定(詳しくは「Firefoxはさらに進化する--私たちのFirefox 3」を参照)だ。

 本稿では、その中でも特に3.1のHTML 5対応機能について紹介したい。

Canvas Text API

 MozillaWikiによると、8月15日現在、Firefox 3.1において新たにサポートされる予定のHTML 5対応機能は以下のようになっている。

  • HTML5 Canvas Text API
  • HTML5 Canvas Shadows API
  • HTML5 Canvas CreateImageData
  • HTML5 Canvas spec compliance
  • HTML5 drag-drop API
  • HTML5 audio/video

 このうち、今回はCanvas Text APIを取り上げる。

 Canvas Text APIはHTML 5のドラフトで定義されているCanvasに文字を描画するためのAPIである。Firefox 3には文字描画のためのmozDrawText()メソッドなどが用意されているが、これはFirefox 3独自のものであり、他のブラウザでは利用できない。

 Firefox 3.1でCanvas Text APIをサポートすることによって、HTML 5の標準機能を利用して文字の描画が行えるようになるのだ。

 Canvas Text APIへの対応により、Canvasの2Dコンテキストに以下のメソッドおよびプロパティが追加される。

  • fillText()メソッド
  • strokeText()メソッド
  • measureText()メソッド
  • fontプロパティ
  • textAlignプロパティ
  • textBaselineプロパティ

 文字の描画はfillText()、またはstrokeText()メソッドを用いて行う。両メソッドとも、描画するテキスト、x座標、y座標の3つか、それに描画領域の最大幅を加えた4つの引数を指定する。

 最大幅が指定された場合は、テキストがそれよりも横に広がらないようにフォントを修正して描画される。fillText()メソッドでは2DコンテキストfillStyleプロパティの値を用いて文字を(塗りつぶしで)描画し、strokeText()メソッドではstrokeStyleプロパティの値を用いて文字のアウトラインを描画する。

 fillText()、およびstrokeText()は、リスト1のように使用する。

リスト1 Canvasに文字を描画






  
    
    
    
    
    Canvas Text APIのサンプル

    
  

  

    

Canvasに文字を書く

ブラウザで表示を確認する

 Canvas Text APIについては、先月公開されたFirefox 3.1 Alpha 1においてすでにサポートされている。これを使ってリスト1を表示してみよう。

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