JavaScriptでSVGを描画する(Raphael使用)

SVGでトランプらしき画像を描画してみました。
SVGでトランプらしきものを描画する(ダイヤ)
SVGでトランプらしきものを描画する(クローバー)
SVGでトランプらしきものを描画する(ハート)
SVGでトランプらしきものを描画する(スペード)

これらをJavaScriptを使用して動的に生成してみたいと思います。



Raphael



SVGを描画するJavaScriptのライブラリに「Raphael」というものがあるようです。

スタートアップ SVG 第2回 SVG実習
Raphael

これを使用してみることにしました。

RaphaelのサイトのDownloadから、Raphael 1.4.7をダウンロードします。
すると、raphael-min.jsというファイルがダウンロードできると思います。


ダウンロードしたファイルを、これから作成するhtmlと
同じ階層に保存しておきます。




ダイアのカードを生成するサンプル



サンプルはこんな感じ。
※若干微調整してあります。


<html>
<head>
    <title>js sample</title>
    <script type="text/javascript" src="raphael-min.js"></script>
    <script type="text/javascript">
    
    function drawImage() {
        var root = document.getElementById('image_base');
        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");
        
        //ダイヤの描画
        //polylineが使用できないようなので、Pathに変更
        var dyer = card.path("M50 10 L10 60 L50 110 L90 60");
        dyer.attr("fill", "red");
        dyer.attr("stroke", "none");
        
        var number = card.text(135, 150, "A");
        number.attr("font-size", "90");
        number.attr("text-anchor", "end");
        
    }
    
    </script>
</head>
<body>
</body>
<input type="button" value="描画" onClick="drawImage();"><br/>
<div id="image_base"><div>
</html>




実行してみると、こんな感じで表示されました。

07_001_20100719180403.png

07_002_20100719180403.png



いい感じです。








関連記事

コメント

非公開コメント

プロフィール

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

PR




検索フォーム

月別アーカイブ