はじめてのRaphael (1) : お絵かき編

デモ。

by mach3ss

HTML

<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>

CSS

body {
    margin:0;
    font-family:'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',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;
}

JavaScript

/**
 * 極めてシンプルな例
 */
(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" } );
})();