これまで、ページ上に図形を描くとしたら、事前に画像を用意しておくか、 Flash などのプラグインに頼るしかなかった。図形を動的に変 化させるとなると、画像だけでは無理だ。 HTML5 では canvas という新要素が追加され、図形を描くための API を規定している。Canvas は特段新しい技術ではないのだが、
Internet Explorer は、最新バージョンでも Canvasを実装していな い。しかし、 Canvas のAPI をエミュレートする ExplorerCanvasという JavaScript ライブラリを使うことで、あたかも Internet Explorer にも Canvas が実装されているかのように利用することが可能だ。 Canvas はすでに現実に利用可能なテクノロジーだ。
そこでCanvasを使うにあたって、パスという概念を知る必要があ る。パスとは、描く図形の軌跡を定義するものだ。まず、 beginPath()メソッド‘でパスを描き始めることを宣言する。次に、 moveTo() メ ソッドでどこから描き始めるかを宣言する。そして、IineTo()メソッド で、先ほどの開始地点からどこの地点までに線を引きたいかを指定 する。この lineTo()メソッドを繰り返して多角形を描くのだ。最後に closePath()メソッドを使って線を閉じる。つまり最終位置と開始位 置を直線で結んでくれる。 ここまでで描きたい図形の軌跡だけを定義したことになるのだが、 まだ Canvas には描画されない。描画するためには、 stroke() メソッドを呼び出す。このメソッドは、これまで宣言されてきたパスをまとめて 線で描くのだ。