HTML5 Canvas で Polygon(多角形)描画

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

Pocket

今, JavaScript のゲームライブラリを制作しています.

まだ公開前ではありますが, 整理がてら その中からチョコチョコと機能を晒していこうと思います.

では早速, 今回は Polygon(多角形) を描画するサンプルを作りました. この多角形描画処理を使えば簡単に下図のようなキレイな三角形や色々な多角形を描画することができます.

Sample and Download

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

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

Code

Script

ポリゴンを描画する関数を定義しているスクリプト(tm.polygon.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}    offsetAngle 角度(省略時は270°)
     */
    np.polygon = function(ctx, x, y, radius, sides, offsetAngle)
    {
        // 内角
        var radDiv = (Math.PI*2)/sides;
        // 回転オフセット(省略時は270°)
        var radOffset = (offsetAngle!=undefined) ? offsetAngle*Math.PI/180 : -Math.PI/2;
        
        // パス描画
        ctx.moveTo(x + Math.cos(radOffset)*radius, y + Math.sin(radOffset)*radius);
        for (var i=1; i<sides; ++i) {
            var rad = radDiv*i+radOffset;
            ctx.lineTo(
                x + Math.cos(rad)*radius,
                y + Math.sin(rad)*radius
            );
        }
        ctx.closePath();
    };
    
    /**
     * ポリゴンパス塗りつぶし描画
     * @param   {CanvasRenderingContext2D}  ctx 描画先コンテキスト
     * @param   {Number}    x 値
     * @param   {Number}    y 値
     * @param   {Number}    radius  半径
     * @param   {Number}    sides   辺の数
     * @param   {Number}    offsetAngle 角度(省略時は270°)
     */
    np.fillPolygon = function(ctx, x, y, radius, sides, offsetAngle)
    {
        ctx.beginPath();
        polygon(ctx, x, y, radius, sides, offsetAngle);
        ctx.fill();
    };
    
    /**
     * ポリゴンパスストローク描画
     * @param   {CanvasRenderingContext2D}  ctx 描画先コンテキスト
     * @param   {Number}    x 値
     * @param   {Number}    y 値
     * @param   {Number}    radius  半径
     * @param   {Number}    sides   辺の数
     * @param   {Number}    offsetAngle 角度(degree, 省略時は270°)
     */
    np.strokePolygon = function(ctx, x, y, radius, sides, offsetAngle)
    {
        ctx.beginPath();
        polygon(ctx, x, y, radius, sides, offsetAngle);
        ctx.stroke();
    };
    
})();
&#91;/code&#93;</pre>
    </section>
    
    <section>
        <h3>Usage</h3>
        <p>
            定義している関数は
        </p>
        <ul>
            <li>polygon … ポリゴンパスをセット</li>
            <li>fillPolygon … ポリゴン塗りつぶし描画</li>
            <li>strokePolygon … ポリゴンストローク描画</li>
        </ul>
        <p>
            となっております.
        </p>
        <p>
            使い方は
        </p>
        <pre class="prettyprint">
strokePolygon(描画先コンテキスト, x 値, y 値, 半径, 辺の数, 角度(degree));

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

引数は一応 Photoshop の多角形ツールのパラメータに似せてあるので そちらを使ったことのある方はなんとなくイメージしやすいのではないかなと思います.

Sample

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

<!DOCTYPE html>

<html lang="ja">
    <head>
        <meta charset="utf-8"> 
        <title>HTML5 Canvas で Polygon(多角形)描画</title>
        <style>
            body {
                font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif;
            }
            canvas {
                box-shadow: 0px 0px 4px 0px black;
            }
        </style>
        <script src="tm.polygon.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;
                        // ポリゴンをストローク描画
                        strokePolygon(context, x, y, radius, i+3, 270);
                        // ポリゴンを塗りつぶし描画
                        fillPolygon(context, x, y+240, radius, i+3, 270);
                    }
                };
                draw();
            };
        </script>
    </head>
    <body>
        <h2>HTML5 Canvas で Polygon(多角形)描画</h2>
        <canvas id="c" width=640 height=480></canvas>
    </body>
</html>

Tips

多角形描画

sin, cos を使って指定された辺(角)の数だけ円を描くようにパスを書いています.

やっているのは円描画の応用なので, 辺の数を増やしていくにつれてキレイな円に近付いていきます.

今回のサンプルを応用すれば簡単に星型多角形(五芒星や六芒星)を描画することができます. その辺も近々書こうと思います.

TRACK BACK URL

POST COMMENT

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

COMMENT