HTML5で新しく追加された機能の一つにCanvasがあります。グラフィックスを描いたり、画像などのバイナリを描画したりすることもできるので使えそうな場面は多いと思うのですが、勝手が違ってなかなか手を出しづらいのが実情です。 そこでJavaScriptがjQueryで圧倒的に使いやすくなったように、CanvasについてもjCanvasを使えばもっと手軽に使えるようになりそうです。

jCanvasの使い方

例えば円を描くコードは次のように書きます。

// Draw a circle
$("canvas").drawArc({
  draggable: true,
  fillStyle: "green",
  x: 100, y: 100,
  radius: 50
});

ぱっと見で分かりやすいですね。

こんな感じに描かれます。

redにすれば円の色が変わります。

こんな感じのデモもあります。アニメーションも容易です。

角度を指定した描画をするデモ。

jCanvasを使えばjQueryと連携してCanvasへの描画が簡単になるでしょう。これまではサーバサイドの画像で出力していたような内容が、クライアントサイドだけで試せるようになるでしょう。

jCanvasはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

jCanvas | jQuery meets the HTML5 canvas caleb531/jcanvas