シンプルな図や円を手軽に描けるjavascript「Library for simple drawing with jQuery」

線で丸や四角などの図をWebでも描きたいと思う人は多いでしょう。
しかし、これまでWebで完結するのは簡単にはいかないことが多かったです。
Library for simple drawing with jQueryは、線や丸、四角などのシンプルな図形を簡単に描くことのできるjavascriptです。

使用方法

Library for simple drawing with jQueryからjquery.wz_jsgraphics.jsをjQueryからjquery.jsをダウンロードします。

<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.wz_jsgraphics.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#id名").drawLine(0, 0, 220, 45);  //線の場合（X始点、Y始点、X終点、Y終点）
	});
</script>
<style type="text/css">
.canvas {
	position: relative;
}
</style>

上記のように記述し、グラフを表示したい場所にdiv id="id名"書き込めば完成です。

<div id="id名" class="canvas"></div>

線のほか、四角、円がありそれぞれ白抜きと色付きを設定できます。
また1つのidに複数を重ねることができます。

円：drawEllipse(X, Y, 幅, 高さ, {color: '色', stroke: 線の太さ});
円（角度付き）：fillArc(X, Y, 幅, 開始角度, 終了角度);
円（塗りつぶし）：fillEllipse(X, Y, 幅, 高さ, {color: '色', stroke: 線の太さ});
四角：drawRect(X, Y, 幅, 高さ);
四角（塗りつぶし）：fillRect(X, Y, 幅, 高さ, {color: '色'}) ;

サンプル

Javascriptサンプルページ一覧

skuare.net