HTML5 canvas を簡単に作成「jCanvas」
当ページのリンクには広告が含まれています。
スポンサーリンク
HTML5 canvas を簡単に作成することのできるプラグイン「jCanvas」を紹介します。
jQueryプラグイン「jCanvas」
このプラグインを使えば、HTML5 から利用できるさまざまな図形を描画することのできる「Canvas」を作成することができます。
さまざまなオプションを指定するだけで丸や四角…などの図形を描けます。
スポンサーリンク
デモページで図形を描画してみました。ご覧ください。
デモのソース（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>
スポンサーリンク