今日の人気記事

  1. ExcelのようにTableが編集できちゃう「Handsontable」
  2. 簡単にドロップダウンメニューがつくれる「Superfish」
  3. 追尾型(オーバーレイ)広告を表示「Meerkat」
  4. 画像に拡大・縮小ボタンを「Zoomer」
  5. 画像ポップアップ・スライドショー「Lightbox 2」

HTML5 canvas を簡単に作成「jCanvas」

スポンサーリンク

HTML5 canvas を簡単に作成することのできるプラグイン「jCanvas」を紹介します。

jQueryプラグイン「jCanvas」

このプラグインを使えば、HTML5 から利用できるさまざまな図形を描画することのできる「Canvas」を作成することができます。

さまざまなオプションを指定するだけで丸や四角…などの図形を描けます。

スポンサーリンク

デモページで図形を描画してみました。ご覧ください。

「jCanvas」のデモ

デモのソース(HTML + jQuery)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="jCanvas のデモでーす。">
<title>jCanvas - jQueryプラグイン</title>
<style>
canvas {
  border: solid 1px blue;
}
</style>
</head>
<body>
<h1>jCanvas のデモ。</h1>
<canvas width='600' height='400'></canvas>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src="jcanvas.js"></script>
<script>
$('canvas').drawArc({
  draggable: true,
  fillStyle: "red",
  x: 200, y: 100,
  radius: 50
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)