2014/08/18
Canvasを使わずに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ライター陣が執筆。噛めば噛むほど（読めば読むほど）制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。
