Lesson 10 CANVAS要素でグラフを描画する - Webデザイン表現&技法の新・スタンダード・CSS3&HTML5編

Webデザイン 表現&技法の 新・スタンダード

Lesson 10

CANVAS要素で グラフを描画する

	制作・文			藤沢立也（Suika Cube Inc.）
＞	To Use			CSS | JavaScript
＞	Browser			IE 9over | Firefox 2over | Safari 3.1over

HTML5で定義されたCANVASは、JavaScriptなどを用いてブラウザ上に描画するためのタグで、線や図形を描画したり、画像を扱ったりできる。ここでは簡単なグラフを作成しながら基本的な使い方を学んでみよう。

まずはCANVAS タグで描画するスペースのサイズを決める【1-1】。そのスペースにグラフを描画するための筆にあたるのがJavaScriptだ。getElementByIdメソッドを使いCANVASのidを取得、getContextメソッドで描画用のコンテキストを取得する。取得したコンテキストはctxというオブジェクトに格納（オブジェクト名は何でもかまわない）。このctxオブジェクトにグラフを描画していくことになる【1-2】。


【1-1】CANVASタグには、幅（width属性）と高さ（height属性）、範囲（描画領域）を指定する。またJavaScriptで使用するid属性も設定する。タグの間には非対応ブラウザ用の注意書きを入れておこう


【1-2】CANVASタグのidをgetElementByIdの引数に指定する。なお、getContext()の引数は現在では「2D」しか選択できないようだ

では実際に描画してみよう。ここでは四角を描画して棒グラフを作成する。fillRectメソッドを用いて四角を描画。引数に縦、横、幅、高さを指定するだけで簡単に描画できてしまう【2-1】。黒い棒グラフだけではわかりにくいので着色してみる。四角の色を設定するにはfillStyleプロパティを使用する。CSSのRGBフォーマットで指定【2-2】。色を変えたら四角をグラフのように並べてみよう【2-3】。またshadowBlurプロパティ等を用いて図形に影をつけることもできる【2-4】。



【2-1】四角の描画。beginPath()は現在の描画パスのリセット。新しい地点から描画をするときに実行する。fillRect(x, y, width, height) は四角を描画する。x,yは図形の左上の点。widthは図形の幅、heightは図形の高さを引数にとる。枠線だけの四角はstrokeRect(x, y, width, height)



【2-2】色をつける。fillStyle = 'rgb(red,gr een,blue)'はCSSのRGBフォーマットで色指定が可能。また rgba (red, green,blue,alpha)での色指定もできる。4つめの引数、透明度（アルファ）は1を100％とし、1〜0の間で透明の割合を指定する



【2-3】グラフのように並べてみる



【2-4】グラフに影をつけた図

次はグラフの軸や項目を描こう。あらかじめ画像を作成し、drawImageメソッドを利用してグラフの背景として表示【3-1】。なお、drawImageメソッドを使うときは注意点がある。それは画像ファイルを読み込む前にメソッドを実行してしまうと、エラーが起こってしまい表示されなくなることだ。そのためonloadイベントを使い画像ファイルが読み込み完了したタイミングで実行する必要がある【3-2】。しかし一部のブラウザでキャッシュが効いて読み込み処理自体を行わない場合があるので現在の時間をURLに追加してキャッシュされないようにする。これはFLASHなどでも利用される一般的なキャッシュ対策だ【3-3】。これで棒グラフは完成する【3-4】。


【3-1】画像ファイルを背景に指定する。draw Image(image, dx, dy)はimageに指定された画像オブジェクトをコンテキストの座標dx,dyに描画する。この時点ではファイルを読込完了前に描画メソッドが実行されてしまう


【3-2】読み込み終了のタイミングで描画する。読み込み完了後に実行すればエラーなく描画できるが、キャッシュが効いてしまった場合onloadが発生しないので描画されないことになる


【3-3】キャッシュの対策をする。ファイルのクエリが異なるとキャッシュが効かない仕組みを利用してnew Date().getTime()で現在の時刻を取得しクエリに付け加える。これでキャッシュされずに常にonloadイベントが発生する



【3-4】背景を指定した棒グラフ

次に棒グラフの上に折れ線グラフを追加する。まずarcメソッドで点を打つ。fillRect メソッドと違い描画自体はされないので最後にfill メソッドで描画する【4-1】。線を引くにはmoveToメソッドで引き始めの座標を指定し、lineToメソッドで終点の座標を指定する。lineToメソッドを繰り返して折れ線を描いていき、最後にstroke メソッドを用いて描画する【4-2】。


【4-1】折れ線グラフの作成。円弧の描画にはarcメソッド、塗りを表示するにはfill()を使う。
arc(x, y, radius, startAngle, endAngle,anticlockwise)のx,yは円の中心の座標、radiusには円の半径、startAngleは起点の角度、endAngleは終点の角度、anticlockwiseは反時計回りの円ならtrue、時計回りならfalse。
真円の場合はendAngleにMath.PI*2を指定。度数を指定する場合は度数 * Math.PI / 180


【4-2】折れ線グラフの作成。線色の指定はstrokeStyle = '色指定'、線の幅はlineWidth[=value]で指定する。線を引くときはmoveTo(x,y) で起点のx,y座標、 lineTo(x,y)で終点のx,y座標設定。次からは前回指定した座標が起点となる。またclosePath()は現在の地点から最初にmoveToで指定した起点への線を引いてくれるので図形を閉じることができる。最後はstroke()で表示しよう

最後はアニメーションでグラフを動かしてみる。ただしCANVAS にはアニメーションのメソッドがない。そこでsetInterval メソッドで再描画を繰り返すことによってグラフを動かしてみる【5-1】。現時点ではブラウザによる動作の差（Chromeで速く、IEでは未対応）など問題はあるが、今後ブラウザの対応やライブラリなどの整備が進めばもっと使いやすくなっていくだろう。ブラウザのみで描画できる技術はプラグインなどが使えない環境（iPhoneのようにFLASHの使えない環境など）でも描画できるなど、いろいろな場面で役に立つ重要な技術になるだろう。



【5-1】intervalID　= setInterval(func,delay) はfuncに入れた関数をdelay ミリ秒ごとに呼び出す関数。CANVAS では一度描いたデータは消えないのでclearRect(x,y,width,height)で指定座標の範囲を消去する。またCANVASでは描いた図形の色などの状態は次の図形に引き継がれる