【Raphael.js】描画エリアを決める
紙がなくては始まらない
例えば現実世界でも、何か絵を描くには、紙とペンが必要になりますよね。Raphael上でも紙とペンを準備してやる必要があります。といってもその書き方は本当に簡単です。
実行結果
以下が実行結果になります。Resultタブをクリックしてね。
解説
今回はbodyタグの中に"canvas"というidのdivを突っ込み、それをRaphael関数で描画エリアに指定しています。わずか一行で紙ができあがります。しかし今回はペンを持っていない為、白紙という実行結果になりました。ちょっと空しいですね！
以下のような書き方も出来ます。覚えておくと便利かもしれません。
Raphael( element, w, h, callback )
- element: 描画するhtmlエレメントのid
- w: 描画エリアの幅
- h: 描画エリアの高さ
- callback: 描画エリアの設定が完了した時に走る関数を設定出来ます。
- 返り値: 描画可能となったエリアオブジェクト。これが紙にあたります。
htmlエレメントに頼らない書き方も出来ます。
Raphael( x, y, w, h, callback )
- x: 描画エリアの左上端のX座標
- x: 描画エリアの左上端のY座標
- w: 描画エリアの幅
- h: 描画エリアの高さ
- callback: 描画エリアの設定が完了した時に走る関数を設定出来ます。
- 返り値: 描画可能となったエリアオブジェクト。これが紙にあたります。
