Raphaelの導入

Raphaelの読み込み

 公式から必要なファイルを適当な場所へダウンロードしてください。
<head>
...
<script src="js/raphael-min.js"></script>
...
 上記の一文を記述します。パスはご自身の環境に合わせて変更してください。

script

スクリプトを直接書く場合

<head>
...
<script src="js/raphael-min.js"></script>
<script>
  window.onload = function(){
    //スクリプトを記述
  }
</script>
...

外部ファイルを使用する場合

<head>
...
<script src="js/raphael-min.js"></script>
<script src="外部ファイルへのパス"></script>
...
//外部ファイル
Raphael(function(){
  //スクリプトを記述
});

描画エリアの指定

座標を直接指定

<script>
...
  var paper = Raphael(x, y, width, height);

 上図のようにウィンドウの(x, y)へ width * height のSVG領域を作成します。

divタグの位置へ配置

<body>
...
  <div id="RaphaelCanvas"></div>
<script>
...
  var paper = Raphael("RaphaelCanvas", width, height);
 id名"RaphaelCanvas"のdivタグ間へwidth*heightのSVG領域を作れという命令です。

 実行すると図のように初期化されます。

 導入はここまでです。