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」

関連記事

• シンプルな図や円を手軽に描けるjavascript「Library for simple drawing with jQuery」

• チラ見せしちゃうJavaScript「Page Peel」
• 入力内容の絞込みを行うJavaScript「Live Filter」
• JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」
• お手軽にタブ切り替えを行うJavaScript「Spotlight」
• 2008年アクセスランキング
• jQueryプラグイン「pikachoose」で小気味良いスライドショーを作る
• jQueryで画像に反射効果を！「Reflection.js for jQuery」
• jQueryでニュースティッカーを作成するJavaScript「JqNews」
• JavaScriptライブラリ「jQuery」でカレンダーを表示する「dynDateTime」
• 画像のキャプションをクールに表示するJavaScript「jQuery Captify Plugin」