skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

シンプルな図や円を手軽に描ける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「Library for simple drawing with jQuery」サンプル

記事作成：2007年11月13日

前の記事：script.aculo.usベースの日付選択javascript「DatePicker」
次の記事：たった2行でテーブルの表を見やすくするjavascript「Tablecloth」