今日の人気記事

  1. 簡単にドロップダウンメニューがつくれる「Superfish」
  2. アニメーションでテキストが切り替わる「Words Rotator」
  3. グラフにマウス操作で動かせる目盛りを実装「2D Slider and Range」
  4. 年月の選択ボタンを実装「Multiple Month Picker」
  5. 指定した要素をドラッグして移動「tinyDraggable」

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>
スポンサーリンク

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