前の記事 ≪：Ajaxを駆使した超リッチUIで4コマ漫画が作れるサービス「Comeeko」
次の記事 ≫：PEARパッケージの配布、インストールが簡単に行えるPEAR_Serverの作り方

JavaScriptで線や円、四角形などの図形を描画するためのライブラリ「wz_jsgraphics.js」

2007年02月16日-はてなブックマーク

スポンサード リンク
[PR]　英単語を忘却曲線アプリを使って超効率よく記憶する方法
DHTML: Draw Line, Ellipse, Oval, Circle, Polyline, Polygon, Triangle with JavaScript
This JavaScript VectorGraphics library provides graphics capabilities for JavaScript: functions to draw circles, ellipses (ovals), oblique lines, polylines and polygons (for instance triangles, rectangles) dynamically into a webpage

JavaScriptで線や円、四角形などの図形を描画するためのライブラリ「wz_jsgraphics.js」。



jsGraphicsクラスが提供されていて、次のようなメソッドが提供されている模様。
メソッド名から推測するのに使うのは非常に容易そう。

  • setColor("#HexColor");  - 描画色を指定
  • setStroke(Number); - 線のスタイルを指定
  • drawLine(X1, Y1, X2, Y2); - 線を描画
  • drawPolyline(Xpoints, Ypoints);  - 複数の座標からなる線を描画
  • drawRect(X, Y, width, height); - 四角形の描画
  • fillRect(X, Y, width, height); - 四角形の塗りつぶし
  • drawPolygon(Xpoints, Ypoints); - 多角形の描画
  • fillPolygon(Xpoints, Ypoints); - 多角形の塗りつぶし
  • drawEllipse(X, Y, width, height); - 円形の描画
  • fillEllipse(X, Y, width, height);  - 円の塗りつぶし
    APIの続きを見る

というわけで、wz_jsgraphicsを使ってみたサンプル

<html>
<head>
<title>WZ_JSGraphics</title>
</head>
<script type="text/javascript" src="wz_jsgraphics.js"></script>

<body>

<div id="myCanvas">
</div>

<div id="anotherCanvas">
</div>

<script type="text/javascript">
<!--
function myDrawFunction()
{
  jg_doc.setColor("#00ff00"); // green
  jg_doc.fillEllipse(100, 200, 100, 180); // co-ordinates related to the document
  jg_doc.setColor("maroon");
  jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
  jg_doc.paint(); // draws, in this case, directly into the document

  jg.setColor("#ff0000"); // red
  jg.drawLine(10, 113, 220, 55); // co-ordinates related to "myCanvas"
  jg.setColor("#0000ff"); // blue
  jg.fillRect(110, 120, 30, 60);
  jg.paint();

  jg2.setColor("#0000ff"); // blue
  jg2.drawEllipse(10, 50, 30, 100);
  jg2.drawRect(400, 10, 100, 50);
  jg2.paint();
}

var jg_doc = new jsGraphics(); // draw directly into document
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");

myDrawFunction();

//-->
</script>
</body>
</html>

各描画用のメソッドを呼び出した後はpaintで画面に描画するようです。

ＩＥでも問題なく動くように作られているところが嬉しいですね。
図形を使って遊んでみたいという方は是非試してみましょう。

関連エントリ

関連の記事検索：JavaScript, ライブラリ, Ajax
スポンサード リンク

By.KJ : 2007年02月16日 07:07 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)