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

このエントリーを含むはてなブックマーク はてなブックマークを見るこの記事をクリップ! コメントを見るYahoo!ブックマークに登録 このエントリーをdel.icio.usに追加する deliciousブックマーク数このページを行き先登録 このページをniftyクリップに登録このページをBuzzurlに登録

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

使用方法
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「Library for simple drawing with jQuery」に関するコメントはまだありません。
ご遠慮なくコメントしてください。

この記事へのトラックバック:

過去の記事

rss

ページトップに戻る