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

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

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

HTML5 canvasを簡単に操作することができるjQueryプラグイン「jCanvas」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Book
  • jQuery Technical Note
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR