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

デモ。

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" } );
})();

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>三角錐の切断</title>
        <link rel="stylesheet" href="demo.css" type="text/css" media="screen">
        <link rel="stylesheet" href="demo-print.css" type="text/css" media="print">
        
        <script type="text/javascript">

	        var _gaq = _gaq || [];
	        _gaq.push(['_setAccount', 'UA-35267547-3']);
	        _gaq.push(['_trackPageview']);

	        (function() {
		        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		     })();

		</script>
        

        <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
//点と名前はセットにしたい 座標と円も
//垂直線を引く
//平行線を引く
//距離の計算
//グリッドみたいな
        	window.addEventListener('load', drawscreen, false);
            function drawscreen() {
            	//canvasの生成
                var r = Raphael("holder", 740, 1050),
                
                //コントロールのデザイン情報を保持する連想配列
                discattr = {fill: "#222", stroke: "#000"};

                //外枠のデザイン
               ...