ソース

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><!-- 文字の描画 -->

参考にしたサイトなど

• Raphaël Reference