/** * 極めてシンプルな例 */ (function(){ /** * [1] Raphael()でキャンバス(paper)をつくる */ var paper = Raphael( "my-paper-0", 64, 64 ); /** * [2] circle()で円を描画し、 * [3] attr()で属性を設定する */ paper.circle( 32, 32, 24 ) .attr( { fill : "#345", stroke : "none" } ); })(); /** * 角丸矩形を描く * Paper.rect( x, y, width, height, radius ); */ (function(){ var paper = Raphael( "my-paper-1", 64, 64 ); paper.rect( 8, 8, 48, 48, 8 ) .attr( { fill : "#345", stroke : "none" } ); })(); /** * 楕円を描く * Paper.ellipse( x, y, horizontalRadius, virticalRadius ); */ (function(){ var paper = Raphael( "my-paper-2", 64, 64 ); paper.ellipse( 32, 32, 24, 16 ) .attr( { fill : "#345", stroke : "none" } ); })(); /** * Pathを使って三角形を描く */ (function(){ var paper = Raphael( "my-paper-3", 64, 64 ); paper.path( "M32,8L56,56H8L32,8Z" ) .attr( { fill : "#345", stroke : "none" } ); })(); /** * Pathを使って矢印を描く * Paper.path( ... ); */ (function(){ var paper = Raphael( "my-paper-4", 64, 64 ); paper.path( "M32,8L56,32L48,40L40,32V56H24V32L16,40L8,32L32,8Z" ) .attr( { fill : "#345", stroke : "none" } ); })();
<div id="container"> <div id="header"> <h1>Raphael Demo</h1> </div> <!-- /#header --> <div id="content"> <div class="items"> <div class="item"> <h2>1. 円を描く : circle()</h2> <p class="item" id="my-paper-0"></p> </div> <!-- /.item --> <div class="item"> <h2>2. 角丸矩形を描く : rect()</h2> <p class="item" id="my-paper-1"></p> </div> <!-- /.item --> <div class="item"> <h2>3. 楕円を描く : ellipse()</h2> <p class="item" id="my-paper-2"></p> </div> <!-- /.item --> <div class="item"> <h2>4. 三角形を描く : path()</h2> <p class="item" id="my-paper-3"></p> </div> <!-- /.item --> <div class="item"> <h2>5. 矢印を描く : path()</h2> <p class="item" id="my-paper-4"></p> </div> <!-- /.item --> </div> </div> <!-- /#content --> </div>
body { margin:0; font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS Pゴシック',sans-serif; } #header { margin-bottom:3em; } #header h1 { background-color:#234; color:#fff; margin:0; padding:0.5em; font-size:1.5em; } .items { } .item { margin:1em; } .item h2 { font-size:1.3em; }