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

線で丸や四角などの図を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」サンプル

sponsors

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

記事作成:
記事URL:

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