ホーム > javascript > [Raphael]javascriptライブラリRaphaelを使ってみた

[Raphael]javascriptライブラリRaphaelを使ってみた

今回はjavascriptのベクターグラフィックライブラリであるRaphaelを紹介。

前回紹介したdojoライブラリでは細かいところまでいじれなかったため、Raphaelを使ってみることにした。

・使用方法

・Raphaelをダウンロードする
ここのページの右上からダウンロードできる。

・htmlファイルを作成する
上記でダウンロードしたjsファイルをインクルードする

  1.  <script src="../js/raphael/raphael.js" type="text/javascript"></script>
  2.   <script src="../js/raphael/sample.js" type="text/javascript"></script>
  3.  
  4.  <!-- body {  background: #fff;  color: #000; } #holder {  height: 700;  margin: auto;  margin-top: 50px;  width: 600px; } -->

・jsファイルを作成する
実際に描画する処理を書く

  1.  window.onload = function () {
  2.  // キャンバスを指定
  3.  var paper = Raphael("holder", 400, 400);
  4.  // 円を書く (x座標,y座標,半径)
  5.  var circle = paper.circle(200, 200, 100);
  6.  // 円の属性を指定する (fill:塗りつぶす色, stroke:ふちの色, storke-width:ふちの太さ)
  7.  circle.attr({"fill": "skyblue", "stroke": "#000", "stroke-width": 4});
  8.  // 四角を書く (左上のx座標, 左上のy座標, width, height)
  9.  var rect = paper.rect(220, 240, 30, 30);
  10.  // 四角の属性を指定する
  11.  rect.attr({"fill": "red"});
  12.  // 楕円を書く (x座標, y座標, x軸半径, y軸半径)
  13.  var ellipse = paper.ellipse(200, 100, 30, 40);
  14.  };

ちなみにサンプルはこちら

【参考】
http://www.skuare.net/test/raphael_1.html
http://raphaeljs.com/reference.html

カテゴリー: javascript タグ:
  1. コメントはまだありません。
  1. トラックバックはまだありません。

Get Adobe Flash player