今日の人気記事

  1. 入力フォームのフォーカスを自動でタブ移動「Autotab」

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='https://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>
スポンサーリンク

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