skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

JavaScriptライブラリはjQueryを筆頭にさまざま出ていますが、raphaelはvectorグラフィックに特化したライブラリです。
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」で図を描くサンプル

記事作成：2008年08月11日

前の記事：ニューデザイン
次の記事：ページの目次を自動で作成するjavascript「jqTOC」