Firefox 3.1のHTML 5対応を検証--Canvas Text APIとCanvas Shadow API

最新特集【一覧】

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

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

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

Canvas Shadow API

　HTML 5ではCanvasに描画された図形に影を付けるために、2Dコンテキストに以下の4つのプロパティを定義している。

• shadowBlur
• shadowColor
• shadowOffsetX
• shadowOffsetY

　ただし、これらのプロパティのブラウザ側のサポートはオプションであり、必須ではない。もしブラウザがこれらのプロパティをサポートしている場合は、Canvasに描かれた図形に任意の影をつけることができる。

　そしてFirefox 3.1（Gecko 1.9.1）では、Canvas Shadow APIとしてこの機能のサポートが追加される予定だ。

　影をつけるための基本となるのはshadowBlurプロパティ。影の大きさを数値で指定することで、それ以降描画される図形に影を付けることができる。デフォルトの値は0で、負の値は無視される。

　リスト3は四角の輪郭（stroke）と塗りつぶし円（fill）に影をつけた例である。対応するブラウザ（今回はSafari 3.1.2を使用した）で表示した場合、図4のように表示される。輪郭の場合は線の周りに影が描画されるのがわかる。

リスト3 図形に影を付ける

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

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

      // 影の範囲を定義
      ctx.shadowBlur = 30;

      // 四角を描く
      ctx.beginPath();
      ctx.rect(20, 20, 150, 150);
      ctx.stroke();

      // 円を塗る */
      ctx.beginPath();
      ctx.arc(50, 50, 40, 0, Math.PI*2, false);
      ctx.fillStyle = "#cc0000";
      ctx.fill();

図4

　影の色を変更したい場合にはshadowColorプロパティを指定する。この値はCSSのcolorプロパティと同様のフォーマットで指定できる。

　例えばリスト4のように指定した場合、ブラウザでの表示は図5のようになる。

リスト4 影の色を指定

      // 影の色を指定
      ctx.shadowColor = "#aa0000";

図5

　そのほか、リスト5のように指定することも可能だ。なお、shadowColorプロパティのデフォルト値は完全に透明な黒となっている。

リスト5 フォーマットはCSSのcolorプロパティと同様

      ctx.shadowColor = "rgb(0, 128, 0)";
      ctx.shadowColor = "Blue";

　shadowOffsetXプロパティとshadowOffsetYプロパティは、それぞれ描画される影のX方向およびY方向へのオフセットを指定するために使用する。shadowBlurによって描画される影を上下および左右のいずれかの方向にずらして描画したい場合には、このプロパティにずらしたい分の値をセットすればよい。正の値で右方向および下方向に、負の値で左方向および上方向に移動する。デフォルトでは0にセットされている。

　例えば右に15、下に10ずらしたい場合にはリスト6のように設定すればよい。対応するブラウザで表示すると図6のように表示される。

リスト6 影のオフセットを指定

      // 影のオフセットを指定
      ctx.shadowOffsetX = 15;
      ctx.shadowOffsetY = 10;

図6