Raphaelで遊んでみた。

すごい広島 #17 でやったこと。 Raphael.js で遊んでみました。 Raphael.js は JavaScript で SVG を作成できるライブラリ。 今日作成したサンプルコードはGitHubにup してます。stepごとに タグを作成しているので、STEP1 のコードがみたい時は git checkout step-1 としてください。 step-5 まであります。 checkout したタグで rake server を実行すると、ローカルサーバが起動します。 http://localhost.com:8000 にアクセスしてみてください。 STEP1 とりあえず試す。 Raphael オブジェクトを作成すると自動的にSVGオブジェクトが挿入される。 絶対座標で挿入されるので、DOMの構築を待つ必要はなかった。 まずは円を描いてみる。 var paper = Raphael(10, 50, 320, 200); // 円を書く at x = 50, y = 40, 半径 10 var circle = paper.circle(50, 40, 10); // 赤色でぬりつぶす circle.attr("fill", "#e00"); // 黒で境界線をかく circle.attr("stroke", "#000"); STEP2 SVG を二つ作成してみる。 Rahael