JavaScriptライブラリ「raphael」で図を描く

JavaScriptライブラリはjQueryを筆頭にさまざま出ていますが、raphaelはvectorグラフィックに特化したライブラリです。
raphaelを利用することで、簡単にグラフなどを書いたり、画像を切り取ったり、回転させたりできます。
JavaScriptライブラリ「raphael」で図を描く

使用方法 raphaelからraphael.jsをダウンロードします。
これをheadに挿入します。
<script type="text/javascript" src="http://yourdomain/raphael.js"></script>
さらに以下のように書くことで様々な形を創り出すことができます。
<script>
window.onload = function () {
var paper = Raphael(50, 50, 320, 200); //キャンバスを指定します。(x軸、y軸、横幅、縦幅)
var circle = paper.circle(20, 40, 100); //円(x軸、y軸、半径)
circle.attr("fill", "#5EC84E"); //色をつけます。
circle.attr("stroke", "#000"); //枠線をつけます。
circle.attr("stroke-width", "10"); //枠線の太さを決めます。
var rect = paper.rect(20, 40, 150,150); //四角(x軸、y軸、x軸終点、y軸終点)
var ellipse = paper.ellipse(200, 100, 30, 40); //楕円(x軸、y軸、x軸終点、y軸終点)
}
</script>

JavaScriptライブラリ「raphael」で図を描くサンプル

sponsors

「JavaScriptライブラリ「raphael」で図を描く」をシェアする

記事作成:
記事URL:

TOP > > > JavaScriptライブラリ「raphael」で図を描く

前の記事:
次の記事:ページの目次を自動で作成するjavascript「jqTOC」