canvasを使ってグラフを描く - Webサイト制作最新トレンドの傾向と対策

web creators特別号
HTML5・スマートフォン・SNS・Webアプリケーション
Webサイト制作最新トレンドの傾向と対策

Webデザイン 1-03
canvasを使ってグラフを描く

canvasを使ってグラフを描く

canvasは、JavaScriptを用いてブラウザ上に線や図形を描画することができる。ここでは簡単なグラフを作成しながら基本的なメソッドの使い方を学んでみよう。

制作・文/藤沢立也(Suika Cube Inc.)
Browser IE 9over Firefox 3.5over Safari 3.2over Chrome 2over



01

まず、絵を描くのに紙と筆が必要なようにcanvasタグで紙の部分に当たる描画領域のサイズを決める【1-1】。筆に当たるのがJavaScript。getElementByIdメソッドを使いcanvas のid を取得しgetContextメソッドで描画用のコンテキストを取得する。取得したコンテキストをctxというオブジェクトに格納しておく(オブジェクト名は何でもよい)。このctxオブジェクトに描画していく【1-2】。

【1-1】canvasタグのコード。canvasタグには、まず幅(width属性)と高さ(height属性)を指定して範囲を指定する。この範囲が描画領域となる。またJavaScriptで指定するid属性も設定しよう。タグの間には非対応ブラウザ用の注意書きを入れておく。
【1-1】canvasタグのコード。canvasタグには、まず幅(width属性)と高さ(height属性)を指定して範囲を指定する。この範囲が描画領域となる。またJavaScriptで指定するid属性も設定しよう。タグの間には非対応ブラウザ用の注意書きを入れておく。


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



02

では、実際に描画してみよう。まず線を引いて折れ線グラフを作成する。arcメソッドで円を描き折れ線グラフの点の部分を作成。続いてfillStyleプロパティで色を決め、fillメソッドで描画する【2-1】。線の部分はmoveToメソッドで引き始めの座標を、lineToメソッドで終点の座標を指定する【2-2】。lineToメソッドを繰り返して折れ線を描いていき、最後にstrokeメソッドを用いて描画していき、折れ線グラフを描画する【2-3】。

【2-1】点を円弧で描画する(実行結果は右)。arc(x, y, radius, startAngle, endAngle, anticlockwise) x,yは円の中心の座標。radiusには円の半径、startAngleは起点の角度、endAngleは終点の角度、anticlockwiseは反時計回りtrue、時計回りfalse。真円にするときはendAngleにMath.PI*2を指定。度数を指定する場合は度数 * π / 180。色はfillStyle = 'rgb(red.green,blue)'でCSSのRGBフォーマットで指定が可能だ。
【2-1】点を円弧で描画する(実行結果は右)。
arc(x, y, radius, startAngle, endAngle, anticlockwise) x,yは円の中心の座標。radiusには円の半径、startAngleは起点の角度、endAngleは終点の角度、anticlockwiseは反時計回りtrue、時計回りfalse。真円にするときはendAngleにMath.PI*2を指定。度数を指定する場合は度数 * π / 180。色はfillStyle = 'rgb(red.green,blue)'でCSSのRGBフォーマットで指定が可能だ。


【2-2】線を描画する(実行結果は右)。線色の指定はstrokeStyle = '色指定'、線の幅はlineWidth[=value]で指定する。
【2-2】線を描画する(実行結果は右)。線色の指定はstrokeStyle = '色指定'、線の幅はlineWidth[=value]で指定する。


【2-3】JavaScriptコード。canvasタグのidをgetElementByIdの引数に指定する。なお、getContext()の引数は現在では「2D」しか選択できない。
【2-3】折れ線グラフを描画する(実行結果は右)。始点を移したい場合はmoveToで移動。点はarcで一つ一つ描いている。



03

次は四角を描画して棒グラフを作成する。fillRectメソッドを用いて四角を描画。引数に縦、横、幅、高さを指定するだけで簡単に描画できてしまう。色も円と同じくfillStyleプロパティで決定【3-1】。またshadowBlurプロパティ等を用いて図形に影をつけることもできる【3-2】。

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


【3-2】影を描画する(実行結果は右)。<br />shadowBlur[=value] には影の長さ、shadowOffsetX[=value] には影のX方向の位置、shadowOffsetY[=value]には影のY方向の位置を入力。ctx.shadowColor[=value] は影の色だ。
【3-2】影を描画する(実行結果は右)。
shadowBlur[=value] には影の長さ、shadowOffsetX[=value] には影のX方向の位置、shadowOffsetY[=value]には影のY方向の位置を入力。ctx.shadowColor[=value] は影の色だ。



04

次はグラフの軸や項目を背景画像として設定する。まず普通に画像として作成し、drawImageメソッドを利用してグラフの背景を表示【4-1】。drawImageメソッドを使うには二つの注意点がある。まず画像の読み込みが完了する前にメソッドを実行するとエラーが発生し表示されない。従ってonloadイベントを使い画像の読込完了のタイミングで実行するよう変更する【4-2】。しかし今度は一部のブラウザは画像をキャッシュしてしまい、読込処理自体を行わないことがあるので現在の時間をURLに追加してキャッシュされないようにする。これはFLASHのキャッシュなどキャッシュ一般においても有効な対策だ【4-3】。早速その上にグラフを重ねてみよう【4-4】。

【4-1】画像ファイルを背景に指定する。drawImage(image, dx, dy)はimageに指定された画像オブジェクトをコンテキストの座標dx,dyに描画する。
【4-1】画像ファイルを背景に指定する。drawImage(image, dx, dy)はimageに指定された画像オブジェクトをコンテキストの座標dx,dyに描画する。


【4-2】影を描画する(実行結果は右)。<br />読込完了後に実行すればエラーなく描画できるが、キャッシュが効いてしまった場合onloadが発生しないので描画されないことになる。
【4-2】読込完了後に実行すればエラーなく描画できるが、キャッシュが効いてしまった場合onloadが発生しないので描画されないことになる。



【4-3】ファイルのクエリが異なるとキャッシュが効かない仕組みを利用してnew Date().getTime()で現在の時刻を取得しクエリに付け加える。
【4-3】ファイルのクエリが異なるとキャッシュが効かない仕組みを利用してnew Date().getTime()で現在の時刻を取得しクエリに付け加える。


【4-4】背景画像に折れ線グラフを描画(実行結果は右)
【4-4】背景画像に折れ線グラフを描画(実行結果は右)
※「02-1〜02-3」は、【2-1】〜【2-3】の意。



05

最後はアニメーションだ。しかしcanvasには固有のアニメーションのメソッドがないので1コマずつ描画しては消すことで動かしてみる。setIntervalメソッドで再描画を繰り返すことによって棒グラフを伸ばしてみた【5-1】。

現時点ではブラウザによる動作の差がある(Chromeで速く、IEは未対応)が、今後ブラウザの対応やアニメーション用のライブラリなどの整備が進めばもっと使いやすくなっていくだろう。

なお、Google が公開したExplorerCanvas(http://excanvas.sourceforge.net/)というライブラリを読み込ませるとIEでもcanvasが動作可能になる。

【5-1】intervalID = setInterval(func,delay)はfuncにいれた関数をdelay ミリ秒ごとに呼び出す関数。canvasでは一度描いたデータは消えないのでclearRect(x,y,width,height)で指定座標の範囲を消去する。またcanvasでは描いた図形の色などの状態は次の図形に継承される。アニメーションでは頻繁に変更が入ることが多いのでsave()で初期状態を記憶させrestore()で初期状態に戻している。
【5-1】intervalID = setInterval(func,delay)はfuncにいれた関数をdelay ミリ秒ごとに呼び出す関数。canvasでは一度描いたデータは消えないのでclearRect(x,y,width,height)で指定座標の範囲を消去する。またcanvasでは描いた図形の色などの状態は次の図形に継承される。アニメーションでは頻繁に変更が入ることが多いのでsave()で初期状態を記憶させrestore()で初期状態に戻している。



[目次に戻る]

【本記事について】
2012年1月28日発売のweb creators特別号「Webサイト制作最新トレンドの傾向と対策」から、毎週記事をピックアップしてご紹介! HTML5・CSS3によるコーディングから、次々と生まれてくる新しいソーシャルサービス、Webアプリケーション、スマートフォンやタブレット端末への対応など、いまWeb制作で話題になっているトピックを網羅した内容になっています。

※本記事はweb creators特別号『Webサイト制作最新トレンドの傾向と対策』からの転載です。この記事は誌面でも読むことができます。


twitter facebook このエントリーをはてなブックマークに追加 RSS