builder Top
HTML/CSS
- Webデザイン
- HTML
- Opera
- Photoshop
- Chrome
- ...

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

杉山貴章（オングス）

2008/08/18 07:00

Firefox 3.1の開発が進む中、MozillaWikiにShiretokoのHTML 5対応が明記された。今回はその中からCanvas Text APIを検証してみたい。

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に文字を描画

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="ja" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>Canvas Text APIのサンプル</title>

    <script type="text/javascript">

    onload = function() {
      draw();
    };

    function draw() {
      // canvasのノードオブジェクトを取得
      var canvas = document.getElementById('canvassample');
      if ( ! canvas || ! canvas.getContext ) {
        return false;
      }

      // 2Dコンテキストを取得
      var ctx = canvas.getContext('2d');

      var str = "Welcome to the new world, sir.";

      // テキストの描画
      ctx.fillStyle = "Red";
      ctx.fillText(str, 20, 40);

      ctx.strokeStyle = "rgb(0, 0, 255)";
      ctx.strokeText(str, 20, 80, 300);

    }
    </script>
  </head>

  <body>

    <h1>Canvasに文字を書く</h1>
    <canvas id="canvassample" width="600" height="400"/>

  </body>
</html>