$('#jCanvasDemo01').drawArc({
  fillStyle: '#8c0000',
  x: 100, y: 100,
  radius: 50
});

$('#jCanvasDemo02').drawLine({
  strokeStyle: '#658193',
  strokeWidth: 4,
  rounded: true,
  startArrow: true,
  arrowRadius: 15,
  arrowAngle: 90,
  x1: 100, y1: 150,
  x2: 150, y2: 175,
  x3: 200, y3: 125
});

$('#jCanvasDemo03').drawPolygon({
  fillStyle: '#3c948b',
  x: 150, y: 150,
  radius: 50,
  sides: 5,
  concavity: 0.5
});

$('#jCanvasDemo04').drawSlice({
  layer: true,
  name: 'red-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#8c0000',
  x: 150, y: 150,
  start: -45, end: 15,
  radius: 100,
  spread: 1 / 40
}).drawSlice({
  layer: true,
  name: 'green-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#3c948b',
  x: 150, y: 150,
  start: -135, end: -45,
  radius: 100,
  spread: 1 / 40
}).drawSlice({
  layer: true,
  name: 'blue-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#ecd16f',
  x: 150, y: 150,
  start: 15, end: -135,
  radius: 100,
  spread: 1 / 40
});

$('#jCanvasDemo05').drawArc({
  fillStyle: '#ecd16f',
  shadowColor: '#333',
  shadowBlur: 10,
  x: 150, y: 150,
  radius: 70
});

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jcanvas.min.js"></script>
<script>
	$(window).load(function(){
		$('#jCanvasDemo01').drawArc({
			fillStyle: '#8c0000',
			x: 150, y: 50,
			radius: 50
		});
		$('#jCanvasDemo02').drawLine({
			strokeStyle: '#658193',
			strokeWidth: 4,
			rounded: true,
			startArrow: true,
			arrowRadius: 15,
			arrowAngle: 90,
			x1: 100, y1: 50,
			x2: 150, y2: 75,
			x3: 200, y3: 25
		});
		$('#jCanvasDemo03').drawPolygon({
			fillStyle: '#3c948b',
			x: 150, y: 50,
			radius: 50,
			sides: 5,
			concavity: 0.5
		});
		$('#jCanvasDemo04').drawSlice({
			layer: true,
			name: 'red-slice',
			groups: ['chart', 'slices'],
			fillStyle: '#8c0000',
			x: 150, y: 120,
			start: -45, end: 15,
			radius: 100,
			spread: 1 / 40
		}).drawSlice({
			layer: true,
			name: 'green-slice',
			groups: ['chart', 'slices'],
			fillStyle: '#3c948b',
			x: 150, y: 120,
			start: -135, end: -45,
			radius: 100,
			spread: 1 / 40
		}).drawSlice({
			layer: true,
			name: 'blue-slice',
			groups: ['chart', 'slices'],
			fillStyle: '#ecd16f',
			x: 150, y: 120,
			start: 15, end: -135,
			radius: 100,
			spread: 1 / 40
		});
		$('#jCanvasDemo05').drawArc({
			fillStyle: '#ecd16f',
			shadowColor: '#333',
			shadowBlur: 10,
			x: 150, y: 80,
			radius: 70
		});
	});
</script>
<canvas id="jCanvasDemo01" width="300" height="100"></canvas>
<pre class="brush: js">
$('#jCanvasDemo01').drawArc({
  fillStyle: '#8c0000',
  x: 100, y: 100,
  radius: 50
});
</pre><br />

<canvas id="jCanvasDemo02" width="300" height="100"></canvas>
<pre class="brush: js">
$('#jCanvasDemo02').drawLine({
  strokeStyle: '#658193',
  strokeWidth: 4,
  rounded: true,
  startArrow: true,
  arrowRadius: 15,
  arrowAngle: 90,
  x1: 100, y1: 150,
  x2: 150, y2: 175,
  x3: 200, y3: 125
});
</pre><br />

<canvas id="jCanvasDemo03" width="300" height="100"></canvas>
<pre class="brush: js">
$('#jCanvasDemo03').drawPolygon({
  fillStyle: '#3c948b',
  x: 150, y: 150,
  radius: 50,
  sides: 5,
  concavity: 0.5
});
</pre><br />

<canvas id="jCanvasDemo04" width="300" height="250"></canvas>
<pre class="brush: js">
$('#jCanvasDemo04').drawSlice({
  layer: true,
  name: 'red-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#8c0000',
  x: 150, y: 150,
  start: -45, end: 15,
  radius: 100,
  spread: 1 / 40
}).drawSlice({
  layer: true,
  name: 'green-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#3c948b',
  x: 150, y: 150,
  start: -135, end: -45,
  radius: 100,
  spread: 1 / 40
}).drawSlice({
  layer: true,
  name: 'blue-slice',
  groups: ['chart', 'slices'],
  fillStyle: '#ecd16f',
  x: 150, y: 150,
  start: 15, end: -135,
  radius: 100,
  spread: 1 / 40
});
</pre><br />

<canvas id="jCanvasDemo05" width="300" height="160"></canvas>
<pre class="brush: js">
$('#jCanvasDemo05').drawArc({
  fillStyle: '#ecd16f',
  shadowColor: '#333',
  shadowBlur: 10,
  x: 150, y: 150,
  radius: 70
});
</pre>

jCanvasについて

jCanvasは、HTML5から実装されたcanvasを使いやすくするプラグインです。
javascriptで色々ゴニョゴニョ書かないといけないところをわずかの記述で同じことができるようにしてくれるとかそんなことをしてくれます。
本家サイトにしっかりとしたドキュメントも用意されています。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン