最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

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に文字を書く
    

  

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

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