HTML5 Canvas で Star Polygon(星型多角形)描画

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

またまたライブラリから抜粋. 今回は前回に引き続き Canvas 関連についてです.

前回, Polygon を描画する関数を作りましたが, 今回はそれを少しいじって Star Polygon(星型多角形)を描画する関数を作ります.

Sample and Download

今回制作したサンプルはこちらです.

サンプルはこちらからダウンロードできます.

Code

Script

Star Polygon を描画する関数を定義しているスクリプト(tm.star.js)のコードです.

/**
 * @author phi
 */

(function(np){
    
    np = np || window;
    
    /**
     * スターパスセット
     * @param   {CanvasRenderingContext2D}  ctx 描画先コンテキスト
     * @param   {Number}    x 値
     * @param   {Number}    y 値
     * @param   {Number}    radius  半径
     * @param   {Number}    sides   辺の数
     * @param   {Number}    sideIndent  凹み(0.0 ~ 1.0)
     * @param   {Number}    offsetAngle 角度(省略時は270°)
     */
    np.star = function(ctx, x, y, radius, sides, sideIndent, offsetAngle)
    {
        // 内円の大きさ(radius * sideIndent)
        var sideIndentRadius = radius * (sideIndent || 0.38);
        var radOffset = (offsetAngle) ? offsetAngle*Math.PI/180 : -Math.PI/2;
        var radDiv = (Math.PI*2)/sides/2;
        
        ctx.moveTo(
            x + Math.cos(radOffset)*radius,
            y + Math.sin(radOffset)*radius
        );
        for (var i=1; i<sides*2; ++i) {
            var rad = radDiv*i + radOffset;
            // 内円, 外円を交互にパスをセット
            var len = (i%2) ? sideIndentRadius : radius;
            ctx.lineTo(
                x + Math.cos(rad)*len,
                y + Math.sin(rad)*len
            );
        }
        ctx.closePath();
    };
    
    /**
     * スター塗りつぶし描画
     * @param   {CanvasRenderingContext2D}  ctx 描画先コンテキスト
     * @param   {Number}    x 値
     * @param   {Number}    y 値
     * @param   {Number}    radius  半径
     * @param   {Number}    sides   辺の数
     * @param   {Number}    sideIndent  凹み(0.0 ~ 1.0)
     * @param   {Number}    offsetAngle 角度(省略時は270°)
     */
    np.fillStar = function(ctx, x, y, radius, sides, sideIndent, offsetAngle)
    {
        ctx.beginPath();
        star(ctx, x, y, radius, sides, sideIndent, offsetAngle);
        ctx.fill();
    };
    
    /**
     * スターストローク描画
     * @param   {CanvasRenderingContext2D}  ctx 描画先コンテキスト
     * @param   {Number}    x 値
     * @param   {Number}    y 値
     * @param   {Number}    radius  半径
     * @param   {Number}    sides   辺の数
     * @param   {Number}    sideIndent  凹み(0.0 ~ 1.0)
     * @param   {Number}    offsetAngle 角度(省略時は270°)
     */
    np.strokeStar = function(ctx, x, y, radius, sides, sideIndent, offsetAngle)
    {
        ctx.beginPath();
        star(ctx, x, y, radius, sides, sideIndent, offsetAngle);
        ctx.stroke();
    };
    
})();
&#91;/code&#93;</pre>
    </section>
    
    <section>
        <h3>Usage</h3>
        <p>
            定義している関数は
        </p>
        <ul>
            <li>star … スターパスをセット</li>
            <li>fillStar … スター塗りつぶし描画</li>
            <li>strokeStar … スターストローク描画</li>
        </ul>
        <p>
            となっております.
        </p>
        <p>
            使い方は
        </p>
        <pre class="prettyprint">
strokeStar(描画先コンテキスト, x 値, y 値, 半径, 辺の数, 凹み(0.0~1.0), 角度(degree));

と書くと引数パラメータに応じた Star Polygon が描画されます.

ポリゴン描画との違いは, 引数に凹みが追加されている点です. これは☆を描画する際の内側の円の大きさを定義するために必要な値です.

こちらも Photoshop の多角形ツールのパラメータに似せてあります.

Sample

今回のサンプルのコードです.

<!DOCTYPE html>

<html lang="ja">
    <head>
        <meta charset="utf-8"> 
        <title>HTML5 Canvas で Star Polygon(星型多角形)描画</title>
        <style>
            body {
                font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
            }
            canvas {
                box-shadow: 0px 0px 4px 0px black;
            }
        </style>
        <script src="tm.star.js" charset="UTF-8"></script>
        <script>
            window.onload = function(){
                var canvas = document.getElementById("c");
                var context= canvas.getContext("2d");
                var radius = 50;
                var draw = function() {
                    for (var i=0; i<10; ++i) {
                        context.fillStyle = context.strokeStyle = "hsl(" + 360/10*i + ", 75%, 50%)";
                        var x = (i%5)*120 + 20 + radius;
                        var y = Math.floor(i/5)*120 + 15 + radius;
                        // スターポリゴンをストローク描画
                        strokeStar(context, x, y, radius, i+3, 0.38, 270);
                        // スターポリゴンを塗りつぶし描画
                        fillStar(context, x, y+240, radius, i+3, 0.38, 270);
                    }
                };
                draw();
            };
        </script>
    </head>
    <body>
        <h2>HTML5 Canvas で Star Polygon(星型多角形)描画</h2>
        <canvas id="c" width=640 height=480></canvas>
    </body>
</html>

Tips

星型多角形描画

前回のポリゴン描画と似ていますが少し違います.

パスの量が2倍になっています.

そして, 外側の円(radius)と内側の円(radius*sideIndent)を交互にパス設定していくことで トゲトゲした図形, つまり星型多角形を描画しています.

そろそろライブラリを公開したいのだが... 仕事が...

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT