WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

gucchi

2014/08/18

Canvasを使わずにJavaScriptで線を描くには

投稿者: gucchi
カテゴリー: プログラム >JavaScript

今回はJavaScriptで図形を描きたい時に便利なJavaScript Graphics Library(JSGL)を試してみました。

ブラウザ上での図形描画ではHTML5のCanvasを使うという選択肢もあります。
しかし、2014年8月現在ではCanvasをサポートしていないIE8を利用してWEBを閲覧されている方が大勢いますので、まだまだ時期尚早な感があります。
そこでCanvasを使わずに線が描けるものが無いかと探していたところJSGLが良さそうな感じなので試してみました。

ライブラリのダウンロード

以下のサイトからライブラリをダウンロードします。
http://www.jsgl.org/doku.php?id=download

描画サンプル

上記の折れ線を描く場合のソースコードです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 lang="en" dir="ltr"
 xmlns:svg="http://www.w3.org/2000/svg" xmlns:vml="urn:schemas-microsoft-com:vml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  
  <!--[if vml]><style>vml\:* {behavior: url(#default#VML);}</style><![endif]-->
<script type="text/javascript" src="http://www.jsgl.org/example/jsgl.min.js"></script>
</head>
<body>
<div id="panel" style="width: 500px; height: 250px"></div>
<script type="text/javascript">
var myPanel = new jsgl.Panel(document.getElementById("panel"));
var myPolyline = myPanel.createPolyline();
myPanel.addElement(myPolyline);
with(myPolyline.getStroke()) {
	setColor('red');
	setWeight(2);
}
myPanel.setCursor(jsgl.Cursor.CROSSHAIR);
myPolyline.addPointXY(0, 200);
myPolyline.addPointXY(100, 180);
myPolyline.addPointXY(200, 90);
myPolyline.addPointXY(300, 120);
myPolyline.addPointXY(400, 200);
</script>
</body>
</html>


座標を指定するだけで簡単に線が引けました。

まとめ

グラフライブラリなどでは対応しきれないような仕様の折れ線グラフを作りたいときには重宝しそうです。

折れ線の他にも直線、丸、四角、多角形、ベジェ曲線などにも対応しているのでアイディア次第でかなり複雑なものが作れそうですね。

最後までお読みいただき、ありがとうございました。
よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ