jQueryを使って簡単にHTML5のcanvasが操作できてしまう、
というプラグイン「jCanvas」がちょっとおもしろそう且つ、活用できそうだったので紹介してみます。

jCanvas


jCanvas

jQueryファイルと、この「jCanvas」プラグインファイルを読み込むことで
jQueryスクリプト操作でcanvasを操作できるようになります。

チュートリアルページでは、
実際にcanvas上に円を描写する場合や
線を描く場合のスクリプトが紹介されています。

「jCanvas」で円を描く

「jCanvas」で円を描く場合は、下記のスクリプトで実行します。

◆SCRIPT
$("canvas.example").drawArc({
	fillStyle: "black",
	x: 100, y: 100
});

実行後の画面は以下の様な感じになります。

「jCanvas」で線を描く

「jCanvas」で線を描く場合は、下記のスクリプトで実行します。

◆SCRIPT
$("canvas.example").drawLine({
	strokeStyle: "#000",
	strokeWidth: 10,
	strokeCap: "round",
	strokeJoin: "round",
	x1: 50, y1: 50,
	x2: 100, y2: 150,
	x3: 200, y3: 100,
	x4: 150, y4: 200
})

実行後の画面は以下の様な感じになります。

「jCanvas」プラグインサイト上には、
「Sandbox」と題した、ページ内のテキストエリアにスクリプトコードを記述することで、
ブラウザ上で「jCanvas」を実行させて、いろいろ試せるコンテンツも用意されています。

jCanvas | Sandbox


jCanvas | Sandbox

円や線を描くだけでなく、グラデーションを付けたり画像を配置するなど
様々なことができるようなので、あれこれ試してみるのもいいかもしれません。

ご参考までに。。。