jCanvasで様々な描画を行う
jCanvasはHTML5のCanvasが提供する様々な描画機能をjQueryの流儀で利用できるAPIを提供しています。ここではそのいくつかを紹介します。
直線は最も基本的な描画です。通常は1本ずつ直線を描画する処理を記述しますが、jCanvasでは（x1,y1）、（x2,y2）……の組に複数の座標を指定することで、連続した直線（折れ線）を一気に描画することができます。
リスト3 jCanvasを用いた直線の描画
$("#canvas").drawLine({
strokeStyle: "black", // 線色
strokeWidth: "5", // 線太さ
rounded: true, // 角を丸める
x1: 10, y1: 50, // 1番目の座標
x2: 100, y2: 30, // 2番目の座標
x3: 150, y3: 20, // 3番目の座標
x4: 450, y4: 200, // 4番目の座標
});
図形ではリスト2で紹介した円（円弧）のほかに、楕円や四角形、多角形などを描画できます。楕円や多角形はHTML5 Canvasでは直接描画できるAPIが存在せず、円の変形や直線の組み合わせで描画する必要がありますが、jCanvasを用いると直接描画可能です。多角形の描画では角の数や回転角度を指定できます。
リスト4 jCanvasを用いた楕円の描画
$("#canvas").drawEllipse({
fillStyle: "#ff8080", // 塗りつぶし色
x: 180, y: 150, // 位置
width: 300, height: 200 // サイズ
});
リスト5 jCanvasを用いた四角形の描画
$("#canvas").drawRect({
fillStyle: "#8080ff", // 塗りつぶし色
x: 250, y: 200, // 位置
width: 100, height: 50 // サイズ
});
リスト6 jCanvasを用いた多角形の描画
$("#canvas").drawPolygon({
fillStyle: "#55ffdd", // 塗りつぶし色
x: 150, y: 150, // 位置
radius:80, // 多角形の半径（80ピクセル）
sides: 5, // 多角形の角の数（5角形）
rotate: 40 // 多角形の回転角度（40度）
});
リスト3～リスト6の処理を全て実行した結果を図3に示します。折れ線→楕円→四角形→五角形の順番で描画しているため、後から描画した図形が自動的に上に重なって描画されます。
図3 jCanvasを用いた様々な描画（003_jquery_jcanvas_draw1.html）
なおjCanvasにおいては、jQueryセレクタで選択されたcanvas要素が複数ある場合、それぞれに対して全く同じ描画を行うことができます。
リスト7 クラスを指定した複数canvas要素への描画（004_jquery_jcanvas_draw2.html）
$(".myCanvas").drawEllipse({ // myCanvasクラスが指定された全てのcanvas要素へ描画
fillStyle: "#ff8080",
x: 170, y: 150,
width: 300, height: 200
});
リスト7を実行すると、ページ内に含まれるmyCanvasクラスが指定されたcanvas要素全てに対して楕円が描画されます。
図4 複数canvas要素への同時描画
