はじめに
ウェブの最新技術を駆使して実装された「Firefoxの灯（ともしび）」（以下、灯と表記）。前回は、灯の特徴をざっと説明しました。連載第2回目となる今回から、灯で実際に使用されている描画技術をテーマに取り上げ、技術的な側面を掘り下げていきます。
本稿では、アプリ実装時、実際に採用された描画の最新技術であるHTML5の「Canvas」要素と、JavaScriptライブラリの「Processing.js」を、サンプルコードを交えて解説します。
記事内で紹介されているサンプルはHTML5を使用して実装されているため、
HTML5をサポートしていないブラウザでは、正常に表示されません。
HTML5対応のブラウザ（Firefox、Chrome等）でご覧ください。
Canvasとは
Canvasとは、JavaScriptを使って比較的自由度の高い描画を可能とするHTML要素の1つです。線や矩形、円などのプリミティブな形状をはじめ、自由曲線やイメージ、文字列なども描画できます。それぞれの色や透明度なども自由に設定できるので、必要とする表現にあわせて描画できます。
また、最近のFirefoxでは、ハードウェアアクセラレーションによりパフォーマンスの向上を図っています。本章では、Canvasの使い方および描画方法を、実際のソースコードを用いながら解説していきます。
Canvasの準備
まずは、以下のようにCanvasエレメントを含むHTMLを用意し、またJavaScriptが使えるように準備します。なお、灯ではJavaScriptライブラリのjQueryを利用しており、サンプルコードもjQueryを使っていきます。jQueryはJohn Resig氏によって開発され、DOMやCSSの操作、DOMレベルでの簡単なアニメーション効果などが簡単に実装できるJavaScriptライブラリとしてウェブデベロッパに人気があります。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script src="jquery-1.5.min.js"></script>
<script src="canvas_1.js"></script>
<title>canvas_1</title>
</head>
<body>
<canvas id="main_canvas"></canvas>
</body>
</html>
$(document).ready(function(){
//ドキュメントの読み込み完了をうけ、このメソッドが呼ばれる
});
矩形を描こう
次に、描画サイズを400px×400px、背景色をgrayに設定したCanvasを用意し、その中にCanvas上のサイズが100px×50pxの真っ赤な矩形を1つ描いてみます。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script src="jquery-1.5.min.js"></script>
<script src="canvas_2.js"></script>
<title>canvas_2</title>
</head>
<body>
<canvas id="main_canvas" width="400" height="400" style="background-color: gray"></canvas>
</body>
</html>
$(document).ready(function(){
//main_canvas を取得
var canvas = $("#main_canvas");
//2Dの描画コンテキストを取得
var context = canvas[0].getContext("2d");
//塗りつぶしの色を赤にする
context.fillStyle = "red";
//x=150, y=250 の座標に 100x50 のサイズで矩形を描く
context.fillRect(150, 250, 100, 50);
});
HTMLではCanvas要素のwidth, height属性で描画サイズを、style属性をbackground-color:gray;とし、背景色をgrayにそれぞれ指定しています。JavaScriptは、documentの読み込み完了をうけて、main_canvasというidを持つCanvas要素を取得し、描画コンテキストを取得し赤い矩形を描いています（コード内コメント参照）。
ここで1つ注意点があります。それは、Canvasにおけるwidth、height属性と、CSSで指定するwidth、heightは意味が違うということです。CSSで指定するサイズは、ブラウザ画面上でのサイズ指定になります。一方で、Canvasでのwidth、height指定は、ある意味Canvasの解像度という言葉に近い理解で良いかと思います。例えば、次のようなCanvas要素があった場合を考えてみましょう。
<canvas width="400" height="400" style="width: 300px; height: 300px; background-color: gray">
この場合、先の例context.fillRect(150, 250, 100, 50);をして矩形を描画したとすると、その矩形の幅100は、300/400 * 100 = 75pxとなり、実際にブラウザで表示される値は75pxとなります。灯でも、Canvasサイズを固定サイズとして描画ロジックを組みたかったため、この2つを指定することで描画ロジック用サイズと配置用サイズとしてそれぞれ使い分けています。
