こんにちは。SI部の加藤(祐)です。

前回は「jqplot」を使ったチャートグラフの書き方をを紹介していきましたが、

このチャートグラフの表示にはCanvasを利用しています。

今回は少し脱線してCanvasについて説明していきたいと思います。

Canvasとは

「Canvas」とは端的に説明するとブラウザに図を書く為に策定された仕様となります。

html5が登場するまで、html上にチャートグラフなどの複雑な図を表示する為には

gifやjpegの様な画像ファイルを用意する必要がありました。

また、値によって動的に変化させる為にはFlashなどを利用してきました。

しかし、html5の新要素「Canvas」とjavascriptを使うことでhtml上に動的な図を表現できるようになりました。

「Canvas」を利用することで以下のようなグラフも動的に表示することが可能になります。

sample4

それでは実際にどのように利用するか説明していきます。

Canvasの使い方

ExplorerCanvasのダウンロード

実はCanvasはInternet Explorer8では対応していません。

最近ではIEのシェアは下がってきましたがそれでもまだ無視できるブラウザでは無いため、

IE8非対応では利用しづらいところがあります。

そこでIE8でも利用できるように必要となるのが「ExplorerCanvas」です。

「ExplorerCanvas」はgoogleが提供しているjavascriptライブラリーでこのライブラリーを取りこむことで

IE8でもCanvasの表示が可能になります。

この「ExplorerCanvas」以下のサイトから取得することが可能です。

https://code.google.com/p/explorercanvas/downloads/list

exc

上記の赤枠の部分をクリックするとダウンロードできます。

ダウンロードしたファイルを解凍すると以下のような構成となっていますが

必要となるのは「excanvas.js」のみとなります。

exclist

htmlの準備

Canvasを使うHTMLでは、先ほどダウンロードした「excanvas.js」をロードするようscript要素をhead要素内に記述します。

また、Canvasを使って図を描きたい場所にCanvas要素を記述しておきます。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
 <title>Canvasサンプル</title>
 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%20src%3D%22jquery-1.10.2.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 <!--[if IE]><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22excanvas.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /><![endif]-->
 </head>
 <body>
 
<h1>Canvasサンプル</h1>

 <canvas id="canvassample" width="300" height="100"></canvas>
 </body>
</html>

座標について

Canvasでは、Canvas要素の左上を起点とした座標系を持ちます。

例えば先ほど書いたhtmlでは<canvas width=”300″ height=”100″>ですので以下の図のようになります。

zahyo

左上の起点から右に向けてx軸、下に向けてy軸をもった座標系となり、

左上端の座標は (0, 0) 、右下端の座標は (300, 100) となります。

Canvasではこの座標ルールに従って線や円などを書いていきます。

図の作成

CanvasはJavaScriptを使って図を描きます。

以下のサンプルでは簡単な長方形をを描きます。このサンプルをみながら、Canvasの解説を行っていきます。

cvssampleg

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
 <title>Canvasサンプル</title>
 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20language%3D%22javascript%22%20type%3D%22text%2Fjavascript%22%20src%3D%22jquery-1.10.2.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 <!--[if IE]><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22excanvas.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /><![endif]-->
 <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%24(function()%7B%0A%20%2F*%20canvas%E8%A6%81%E7%B4%A0%E3%81%AE%E3%83%8E%E3%83%BC%E3%83%89%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E5%8F%96%E5%BE%97%20*%2F%0A%20%2F%2F%20jQuery%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%A7%E3%81%AFcanvas%E3%81%AEAPI%E3%81%8C%E4%BD%BF%E3%81%88%E3%81%AA%E3%81%84%E7%82%BA%E3%80%81jQuery%E3%81%AE%E4%BB%95%E6%A7%98%E3%81%A7%E8%A6%81%E7%B4%A0%E3%81%AE0%E7%95%AA%E7%9B%AE%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E3%81%A8%E3%83%8E%E3%83%BC%E3%83%89%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%8C%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%8D%E3%82%8B%E3%80%82%0A%20var%20cvs%20%3D%20%24('%23canvassample')%5B0%5D%3B%0A%20%2F*%202D%E3%82%B3%E3%83%B3%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%20*%2F%0A%20var%20ctx%20%3D%20cvs.getContext('2d')%3B%0A%20%2F*%20%E5%9B%9B%E8%A7%92%E3%82%92%E6%8F%8F%E3%81%8F%20*%2F%0A%20ctx.beginPath()%3B%0A%20ctx.moveTo(20%2C%2020)%3B%0A%20ctx.lineTo(120%2C%2020)%3B%0A%20ctx.lineTo(120%2C%2080)%3B%0A%20ctx.lineTo(20%2C%2080)%3B%0A%20ctx.closePath()%3B%0A%20ctx.stroke()%3B%0A%20%7D)%3B%0A%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</head>
 <body>
 
<h1>Canvasサンプル</h1>

 <canvas id="canvassample" width="300" height="100"></canvas>
 </body>
</html>

1.Canvas要素のノードオブジェクトを取り出し

10行目の「var cvs = $(‘#canvassample’)[0];」になります。

CanvasのAPIはjQueryオブジェクトでは使用できません。

その為、jQueryでは要素の0番目を取得するとノードオブジェクトが取得できる仕様になっています。

jQueryのセレクタ指定で取得せずにDOMのgetElementByIdメソッドなどを利用して取得することも可能です。

2.getContextメソッドを使ってコンテキストを取得する。

12行目の「var ctx = cvs.getContext(‘2d’);」になります。

getContextはCanvasノードにアクセスするためのメソッドで、

Canvasの操作する際には必ず一度実行する必要があります。

上のサンプルでは、getContext(‘2d’)でコンテキスト名を指定しています。

現在のところ、getContext()メソッドでは’2d’という引数のみがサポートされています。

getContextメソッドは、HTML5で、Canvas要素に対して規定された新たにDOMメソッドの一つです。

Internet Explorerでは、

excanvas.jsによりgetContextメソッドがセットされているかのようにふるまいます。

以降、図を描く際には、コンテキストとなるオブジェクト(サンプルでは)ctxを通して命令を記述していきます。

3.Canvas要素に図を書く

サンプルの14~20行目までの記述となります。

① 図を描くと宣言します。: ctx.beginPath();

図を描くときはまず、サブパスの初期化を行いスタートの座標(0,0)を指定します。

サブパスについては後述しますので今は座標の初期化と考えてください。

② 書き始める場所を指定します。: ctx.moveTo(20, 20);

この記述により座標(0,0)から(20,20)に移動します。

step1

③ 引きたい線の終点座標を指定します。 ctx.lineTo(120, 20);

step2

④ 引きたい線の終座標を指定します。: ctx.lineTo(120, 80);

step3

⑤ 引きたい線の終点座標を指定します。: ctx.lineTo(20, 80);

step4

⑥ 描いた線を閉じます。: ctx.closePath();

step5

⑦ できた図形を線で描画します。: ctx.stroke();

step6

このように線を描く場合は、上記のステップを繰り返すことで図を描画することができます。

4.サブパスとは

Canvasではコンテキストを取得すると1つのパス(経路)を持ちます。

パスは0個以上のサブパスによって構成されています。

サブパスというのはパスを構成する一つ一つの線のことを指します。

上記の例で行くと③、④、⑤、⑥の線がそれぞれサブパスとなります。

このサブパスををコンテキストが記憶することでどのように描画するかを指定していることが可能になります。

最後に

サンプルでは単純な長方形の描画だけでしたがその他に円や弧などの複雑な図を表示することもできます。

また図の塗りつぶしやグラデーション、透過処理を行うAPIなども用意されています。

最近はjqPlotなどCanvasを利用した複雑な図を描画できるライブラリーも多数あるので

それらを利用する方が目的の物を簡単作れるようになっています。

しかし、Canvasの仕様自体は理解してしまえば難しい技術ではないので

ライブラリーでは表現できない独自の図がほしいといとき等に

「Canvas」を利用するといった選択肢があるとよりよいweb画面が作成できるのではないかと思います。

以上、ご一読頂き有り難うございました。