JavaScript:Canvasで多角形を描画する関数

スポンサーリンク
JavaScript

JavaScriptのCanvas機能にあるmoveToメソッドとlineToメソッドを利用した多角形を描画する関数イメージです。

考え方は円周上の点を等分割して座標を求め、線でつなぐ方法です。

多角形の枠線のみ描画する drawPolygon関数

drawPolygon( 頂点の数, 中心x座標, 中心y座標, 半径, 枠線の太さ, 色 )

// 多角形を描画する関数(頂点の数、中心x座標、中心y座標、半径、枠線の太さ、色)
const drawPolygon = function(n, cx, cy, r, lineWidth, color){
    const p = Math.floor(360 / n)
    let theta = -90;    // 角度修正(キャンバスでは3時方向が0度扱いのため12時方向を0度とする)
    let polygon = [];

    while(theta<360-90){   // 全ての頂点を求める
        const pos = {
            x: r * Math.cos(theta*Math.PI/180) + cx,
            y: r * Math.sin(theta*Math.PI/180) + cy,
        };
        polygon.push(pos);
        theta += p;    // 次の点の位置
    }
    console.log({polygon});

    // 多角形を描画する
    g.strokeStyle = color;
    g.lineWidth = lineWidth;
    g.beginPath();
    for(let i=0; i<polygon.length; i++){
        if(i==0){
            g.moveTo(polygon[i].x, polygon[i].y);
        }
        else{
            g.lineTo(polygon[i].x, polygon[i].y);
        }
    }
    g.closePath();  // パスを閉じる
    g.stroke();
}

塗りつぶし多角形を描画する fillPolygon関数

fillPolygon( 頂点の数, 中心x座標, 中心y座標, 半径, 色 )

// 多角形を塗りつぶし描画する関数(頂点の数、中心x座標、中心y座標、半径、色)
const fillPolygon = function(n, cx, cy, r, color){
    const p = Math.floor(360 / n)
    let theta = -90;    // 角度修正(キャンバスでは3時方向が0度扱いのため12時方向を0度とする)
    let polygon = [];

    while(theta<360-90){   // 全ての頂点を求める
        const pos = {
            x: r * Math.cos(theta*Math.PI/180) + cx,
            y: r * Math.sin(theta*Math.PI/180) + cy,
        };
        polygon.push(pos);
        theta += p;    // 次の点の位置
    }

    // 塗りつぶし多角形を描画する
    g.fillStyle = color;
    g.beginPath();
    for(let i=0; i<polygon.length; i++){
        if(i==0){
            g.moveTo(polygon[i].x, polygon[i].y);
        }
        else{
            g.lineTo(polygon[i].x, polygon[i].y);
        }
    }
    g.closePath();  // パスを閉じる
    g.fill();
}

サンプルのソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="main.js"></script>
    <title>多角形を描画する</title>
    <style>
        *{ margin: 0; padding: 0; }
    </style>
</head>
<body>
    <canvas id="canvas" width="480" height="480"></canvas>
</body>
</html>

main.js

// main.js
let canvas, g;

// 多角形を塗りつぶし描画する関数(頂点の数、中心x座標、中心y座標、半径、色)
const fillPolygon = function(n, cx, cy, r, color){
    const p = Math.floor(360 / n)
    let theta = -90;    // 角度修正(キャンバスでは3時方向が0度扱いのため12時方向を0度とする)
    let polygon = [];

    while(theta<360-90){   // 全ての頂点を求める
        const pos = {
            x: r * Math.cos(theta*Math.PI/180) + cx,
            y: r * Math.sin(theta*Math.PI/180) + cy,
        };
        polygon.push(pos);
        theta += p;    // 次の点の位置
    }

    // 塗りつぶし多角形を描画する
    g.fillStyle = color;
    g.beginPath();
    for(let i=0; i<polygon.length; i++){
        if(i==0){
            g.moveTo(polygon[i].x, polygon[i].y);
        }
        else{
            g.lineTo(polygon[i].x, polygon[i].y);
        }
    }
    g.closePath();  // パスを閉じる
    g.fill();
}

// 多角形を描画する関数(頂点の数、中心x座標、中心y座標、半径、色)
const drawPolygon = function(n, cx, cy, r, lineWidth, color){
    const p = Math.floor(360 / n)
    let theta = -90;    // 角度修正(キャンバスでは3時方向が0度扱いのため12時方向を0度とする)
    let polygon = [];

    while(theta<360-90){   // 全ての頂点を求める
        const pos = {
            x: r * Math.cos(theta*Math.PI/180) + cx,
            y: r * Math.sin(theta*Math.PI/180) + cy,
        };
        polygon.push(pos);
        theta += p;    // 次の点の位置
    }
    console.log({polygon});

    // 多角形を描画する
    g.strokeStyle = color;
    g.lineWidth = lineWidth;
    g.beginPath();
    for(let i=0; i<polygon.length; i++){
        if(i==0){
            g.moveTo(polygon[i].x, polygon[i].y);
        }
        else{
            g.lineTo(polygon[i].x, polygon[i].y);
        }
    }
    g.closePath();  // パスを閉じる
    g.stroke();
}

window.addEventListener("load", ()=>{
    // キャンバスの初期設定
    canvas = document.getElementById("canvas");
    g = canvas.getContext("2d");

    // 背景色描画
    g.fillStyle = "#ccc";
    g.fillRect(0, 0, canvas.width, canvas.height);

    // 塗りつぶし多角形を描画
    fillPolygon(3, 120, 120, 80, "steelblue");
    fillPolygon(4, 360, 120, 80, "royalblue");
    fillPolygon(5, 120, 360, 80, "tan");
    fillPolygon(6, 360, 360, 80, "khaki");

    // 多角形(枠線)を描画
    drawPolygon(3, 120, 120, 80, 5, "#555");
    drawPolygon(4, 360, 120, 80, 5, "#555");
    drawPolygon(5, 120, 360, 80, 5, "#555");
    drawPolygon(6, 360, 360, 80, 5, "#555");

});

スポンサーリンク

コメント

タイトルとURLをコピーしました