シンプルな図や円を手軽に描ける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」

関連記事

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」