SVGを簡単に使えるjavascriptライブラリ「Raphael.js」

  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加

HTML5より実装されたSVGの機能を簡単に使えるjavascriptライブラリ「Raphael.js」のご紹介です。

たまたま知りえたのでメモ代わりに。これを知った時は衝撃が走りました!!

WEBサイトに革命が起きそうな「Raphael.js」。しかも軽量(89KB)
→まずはデモをご覧下さい。

ライブラリのダウンロード

Raphaël—JavaScript Library」よりダウンロードしてください。

 

Raphael.jsの使い方

まずは適当な要素をHTMLでつくります。

<br />
&lt;div id="svg"&gt;&lt;/div&gt;<br />

 

最後に呼び出し

</p>
<pre>&lt;script type="text/javascript" src="raphael.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
window.onload = function () {
 //ステージの設定
 var stageW = 500
 var stageH = 500;
 var paper = Raphael("svg", stageW, stageH);
 //円を描画
 var x = 100;
 var y = 100;
 var size = 100;
 var circle = paper.circle(x, y, size);
};
&lt;/script&gt;</pre>
<p>

簡単な円を表示するサンプルですが、公式サイトのデモはほんとにすごい!
Demosより実際見て驚いて下さい。

このスクリプト何よりすごいのが、

・アニメーションが使える

・クロスブラウザ対応

Firefox 3.0+
Safari 3.0+
Chrome 5.0+
Opera 9.5+
Internet Explorer 6.0+.

私はまだ触り程度ですが今後色々と試していこうと思います。

You may also like...

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です