はじめに
HTML5において追加されたCanvasは、HTMLとJavaScriptを用いてWebページ内に図形や線などを描画できる機能で、動画や音楽を再生するvideoタグやaudioタグなどとともに、HTML5の代表的な機能としてしばしば紹介されます。
Canvas機能を用いるとHTMLのcanvas要素で定義された領域に対してJavaScriptで描画処理を行えます。以下のような描画を行うAPIが提供されています。
- 線（直線、曲線）
- 図形（四角形、円）
- 色とスタイル（単色、グラデーション、影）
- 文字の描画（サイズ、フォント、色の指定）
- 変形（拡大、回転、マトリクス変換）
しかし、Canvas描画処理のJavaScript APIはグラフィックス処理独特の記述方法となっており、学習のハードルはそれなりに高いものになっています。
今回紹介するjCanvasは、HTML5 Canvasの機能をjQueryにより使いやすくするプラグインです。jCanvasを利用することには以下のメリットがあります。
- 慣れ親しんだjQueryの流儀でCanvasの描画を記述できる
- 図形単位で処理の記述が分離されコードの見通しが良くなる
- メソッドチェーンを使用することで複数図形の連続描画ができる
- 複数のcanvas要素に対して同時に描画できる
- レイヤー機能が標準で利用できる
対象読者
- HTML5 Canvasに興味のある方
- CanvasのJavaScript APIを直接操作することに抵抗を感じる方
- jQueryの枠内で全てを処理したい方
必要な環境
jCanvasが必要とするjQueryは1.4以降とアナウンスされています。今回は1.x系の最新版であるjQuery 1.11.1を使用します。また、サポートするブラウザは以下がアナウンスされています。
ブラウザ
- Google Chrome 20以降
- Mozilla Firefox 10.0以降
- Apple Safari 5.0以降
- Opera 10.1以降
- Internet Explorer 9以降
プラットフォーム
- Windows
- Mac OS X
- Ubuntu
- iOS 5.0+
- Android 3.0+
今回は以下の環境で動作を確認しています。
- Windows 7 64bit版
- Internet Explorer 11
簡単な例でjCanvasの便利さを実感
jCanvasは公式サイトにおいてMITライセンスで配布されています。公式サイトではライブラリファイルそのもののほか、APIドキュメント、Web画面上でjCanvasの動作を確認できるSandbox、様々な利用例を紹介するGallery、jCanvasの機能を拡張するPluginsなど、jCanvasに関する各種情報が提供されています。
jCanvasをWebページで利用するためには、公式サイトからダウンロードしたjcanvas.js（通常版）またはjcanvas.min.js（縮小版）をscriptタグでHTMLファイルに設定します。
最初に、jCanvasを使わない場合と使った場合のCanvas描画実装を比較します。シンプルな円と文字をCanvasに描画する処理をリスト1ではjCanvasを使わずに、リスト2ではjCanvasを使って記述しています。
なお、キャプションに記載しているファイル名は、記事に添付しているサンプルで該当するファイルを示しています（以下同様）。
// 描画するためのコンテキストを取得
var context = $("#canvas")[0].getContext("2d");
// 1. 赤い円を描画する
// 塗りつぶしの色（赤）
context.fillStyle="#ff0000";
// 枠線の色（黒）
context.strokeStyle="#000000";
// 枠線の太さ（2px）
context.lineWidth=2;
// 円を描画
context.arc(240, 120, 50, 0, 2 * Math.PI, true);
// 描画実行（塗りつぶし）
context.fill();
// 描画実行（枠線）
context.stroke();
// 2. 文字を描画
// 文字色（青）
context.fillStyle="#0000ff";
// フォントサイズ、フォントファミリー
context.font="24px Arial";
// 位置（上下・左右中央）
context.textAlign = "center";
context.textBaseline = "middle";
// 描画実行
context.fillText("Canvasによる描画", 240, 280);
$("#canvas").drawArc({ // 1. 赤い円を描画する
fillStyle: "#ff0000", // 塗りつぶしの色（赤）
strokeStyle: "#000000", // 枠線の色（黒）
strokeWidth: 2, // 枠線の太さ（2px）
x: 240, // x方向位置（240px）
y: 120, // y方向位置（120px）
radius: 50 // 半径（50px）
}).drawText({ // 2. 青い文字を描画する
fillStyle: "#0000ff", // 文字色（青）
fontSize: 24, // フォントサイズ（24px）
fontFamily: "Arial", // フォントファミリー（Arial）
x: 240, // x方向位置（240px）
y: 280, // y方向位置（120px）
text: "Canvasによる描画" // 文字文言
});
リスト1とリスト2は全く同じ描画を行います。
jCanvasを使用しないリスト1ではCanvas要素から描画のためのコンテキストを取得し、それを用いて1つずつ順番に描画処理を記述するため、コード量が増えた時に記述内容から描画内容を把握しづらくなる場合があります。一方、jCanvasを使用するリスト2では、jQueryセレクタで選択したCanvas要素に対して描画処理を直接記述するため、複数の描画処理を直感的でわかりやすく記述できます。また、パラメータをJavaScriptオブジェクトでまとめて指定できたり、複数の描画処理を連続的に記述できる（メソッドチェーン）ことも、より見通しの良いコード記述に寄与しています。
このようにjCanvasを利用することによってコード記述がシンプルになり、実装者がより描画処理の実装に集中できるようになります。
