JavaScriptでトランプらしき画像を表示する(SVG,Raphael)

Raphaelを使用して、それっぽいダイヤの画像が表示できました。
JavaScriptでSVGを描画する(Raphael使用)

トランプ全種類表示できるよう、jsファイルを作ってみます。



my-trump.js



こんな感じになりました。
※Raphaelに依存しています。
Raphael



function drawTrump(root, kind, number) {
    var card = Raphael(root, 150, 200);
    //枠線の描画
    var rect = card.rect(0, 0, 150, 200);

    //塗りつぶし色をなし
    rect.attr("fill", "none");
    //枠線を黒
    rect.attr("stroke", "bluck");
    //枠線の太さを指定
    rect.attr("stroke-width", "5");
    
    //カードの図柄を表示する
    switch (kind) {
        case 'dyer':
            drawDyer(card)
            break;
        
        case 'clover':
            drawClover(card);
            break;
            
        case 'heart':
            drawHeart(card);
            break;
            
        case 'spade':
            drawSpade(card);
            break;
    }
    
    //表示するカードの番号
    var disp_number = number;
    switch (number) {
        case '1':
            disp_number = "A";
            break;
        case '11':
            disp_number = "J";
            break;
        case '12':
            disp_number = "Q";
            break;
        case '13':
            disp_number = "K";
            break;
    }
    
    
    var number_text = card.text(135, 150, disp_number);
    number_text.attr("font-size", "90");
    number_text.attr("text-anchor", "end");
}

//ダイヤの描画
function drawDyer(card) {
    var dyer = card.path("M50 10 L10 60 L50 110 L90 60");
    dyer.attr("fill", "red");
    dyer.attr("stroke", "none");
}

//クローバーの描画
function drawClover(card) {
    var st = card.set();
    st.push(
        card.circle(50, 30, 17),
        card.circle(30, 60, 17),
        card.circle(70, 60, 17),
        card.path("M50 40 L40 100 L60 100")
    );
    st.attr({fill: "bluck"});
}

//ハートの描画
function drawHeart(card) {
    var st = card.set();
    st.push(
        card.path("M20 70 A20 25 0 1 1 50 40 A20 25 0 1 1 80 70 L50 110 Z")
    );
    st.attr({fill: "red", stroke : "none"});
}

//スペードの描画
function drawSpade(card) {
    var st = card.set();
    st.push(
        card.path("M15 50 A20 20 0 1 0 50 70 A20 20 0 1 0 85 50 L50 10 Z"),
        card.path("M50 60 L40 100 L60 100")
    );
    st.attr({fill: "bluck"});
}




呼び出すHTMLはこちら。


<html>
<head>
    <title>js sample</title>
    <script type="text/javascript" src="raphael-min.js"></script>
    <script type="text/javascript" src="my-trump.js"></script>
    <script type="text/javascript">
    
    function drawImage() {
        var root = document.getElementById('image_base');
        var child;
        while(child = root.firstChild) {
            root.removeChild(child);
        }
        
        var kind = document.getElementById('card').value;
        var number = document.getElementById('number').value;
        
        drawTrump(root, kind, number);
        
    }
    
    </script>
</head>
<body>
</body>
<select id="card">
    <option value="dyer">Dyer</option>
    <option value="spade">Spade</option>
    <option value="heart">Heart</option>
    <option value="clover">Clover</option>
</select>
<select id="number">
    <option value="1">A</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">J</option>
    <option value="12">Q</option>
    <option value="13">K</option>
</select>
<input type="button" value="描画" onClick="drawImage();"><br/>
<div id="image_base"><div>
</html>




動かしてみたときの画像です。

08_001_20100719180536.png

08_002_20100719180536.png

08_003_20100719180536.png

08_004_20100719180536.png



備忘録として、以下のURLに動作する環境をアップしておきます。
http://symfo.web.fc2.com/js-sample/tranp/sample.html








関連記事

コメント

非公開コメント

プロフィール

Author:symfo
blog形式だと探しにくいので、まとめサイト作成中です。
Symfoware まとめ

PR




検索フォーム

月別アーカイブ