HTML 5+JavaScriptでCanvasアプリを作る

2009年1月13日(火)
喜安 亮介

基本的なメソッドとプロパティ

 それではCanvasで使える基本的なメソッドとプロパティを見ていきましょう。

 まず、メソッドとしてgetContext()メソッドがあります。これはCanvasを使って図形を描画する際の下地づくりとして実行しなければならないメソッドです。このメソッドを実行することにより2DコンテキストのCanvasRenderingContext2Dオブジェクトが生成されます。また、現在は2dという値しか設定できませんが、将来的にはOpenGL ES APIベースの'3d'コンテキストが追加されるようになり、"3d"という値も指定できるようになる予定のようです。

 はじめに、2dコンテキストのオブジェクトから使うことができる代表的なメソッドを紹介します。

 状態に関するメソッドは以下になります。

・save()メソッド…描画状態をスタックへ保存する
・restore()メソッド…保存された描画状態をスタックから取り出す

 パスを描画するためメソッドは以下になります。

・beginPath()メソッド…サブパスの描画を開始する
・moveTo()メソッド…サブパスの描画の初期座標をセットする
・lineTo()メソッド…直線を描画する
・arc()メソッド…中心座標と半径を設定して円弧を描画する
・rect()メソッド…短形を描画する
・stroke()メソッド…ブラウザ上に図形を描画する

 次に、2dコンテキストのオブジェクトから使うことができる代表的なプロパティを紹介します。

・fillStyle…図形内の色やスタイルを設定する
・strokeStyle…図形の輪郭の色やスタイルを設定する
・shadowBlur…図形の周りにぼかしの処理を加える
・font…フォントサイズや種類を設定する

 すべてのメソッド・プロパティの仕様に関しては、WHATWGのサイト(http://www.whatwg.org/specs/web-apps/current-work/#the-2d-context)をご覧ください。

簡単な図形を描いてみる

 それではCanvasで使うメソッドとプロパティを用いて簡単な図形を描いてみましょう。

 まずはじめに簡単な例として、fillRect()メソッドを使って四角形を描画してみます。サンプルファイルはこちらからダウンロードできます(773_1.zip/626 B)。canvas要素のマークアップを行い、そのID名に「rect1」という名前をつけ、DOMを使ったアクセスができるようにしておきます。ダイナミックにcanvasタグ内に図形を描画するので、タグ内には何も記述しません。



 ページ内容の読み込みが完了の際に発生するonloadイベント受けたあと、drawRect()関数が実行されるようにしておきます。

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

 getContextで2dコンテキストで使えるメソッドのリファレンスを取得し、その返り値をctxという変数に代入します。そして、2dコンテキストのオブジェクトであるctxのbeginPath()メソッドを実行し、パスを初期化したあと、fillRect()メソッドを用いて短形(長方形)を描画します。fillRectメソッドの各パラメータは以下のようになります。

オブジェクト名.fillRect(x座標, y座標, 短形の幅, 短形の高さ)

 実際のソースコードは図2-2になります。

 次に、arc()メソッドを使って円を描画してみましょう。サンプルファイルはこちらからダウンロードできます(773_2.zip/630 B)。

 基本的な処理フローは四角形を描画する場合と同様です。円の場合はarc()メソッドを使います。arc()メソッドの各パラメータは以下のようになります。

オブジェクト名.arc(円の中心のx座標, 円の中心のy座標, 円の半径, 円弧を描き始める角度, 円弧を描き終える角度,真偽値-trueの場合は半時計周りで描画しfalseの場合は時計回りで描画される)

 円を描画するdrawCircl関数のソースコードは図2-3になります。

有限会社タグパンダ
Web制作会社、有限会社タグパンダの代表取締役。同社ではディレクター兼デザイナーとして、Webクリエイティブ全般の指揮をとっている。技術書籍や記事の執筆活動も行っており、著書に「スタイルシートワークショップ CSS+XHTMLによるWeb標準実践ガイド」(ソフトバンククリエイティブ)がある。有限会社タグパンダ: http://www.tagpanda.co.jp/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています