デモ
円の描画
四角の描画(通常)
四角の描画(角丸)
楕円の描画
線の描画
文字の描画
ソース
javascript
$(function(){
//Raphael (canvas object)を呼び出す。
//呼び出し方はhttp://raphaeljs.com/reference.html#Raphaelを参照
var paper;
// 円の描画 - http://raphaeljs.com/reference.html#Paper.circle
// Ex) circle(x, y, radius);
paper = Raphael("circle", 200, 100);
var circle = paper.circle(20, 20, 10);
// 四角の描画 - http://raphaeljs.com/reference.html#Paper.rect
// Ex) rect(x, y, radius);
paper = Raphael("rect", 200, 100);
var rect = paper.rect(10, 10, 50, 50);
paper = Raphael("rect-rounded", 200, 100);
var rectRounded = paper.rect(10, 10, 50, 50, 10);
// 楕円の描画 - http://raphaeljs.com/reference.html#Paper.ellipse
paper = Raphael("ellipse", 200, 100);
var ellipse = paper.ellipse(50, 50, 40, 20);
// 線の描画 - http://raphaeljs.com/reference.html#Paper.path
// 記述の仕方はhttp://www.w3.org/TR/SVG/paths.html#PathDataを参照
paper = Raphael("path", 200, 100);
var path = paper.path("M10 10L90 90");
// 文字の描画 - http://raphaeljs.com/reference.html#Paper.text
paper = Raphael("text", 200, 100);
var text = paper.text(50, 50, "Hello World!!");
});
HTML
<div id="circle"></div><!-- 円の描画 -->
<div id="rect"></div><!-- 四角の描画(通常) -->
<div id="rect-rounded"></div><!-- 四角の描画(角丸) -->
<div id="ellipse"></div><!-- 楕円の描画 -->
<div id="path"></div><!-- 線の描画 -->
<div id="text"></div><!-- 文字の描画 -->