Canvasで五芒星を書くスクリプトを書いた。

どうやって5つの座標を割り出すのか頭をひねってたけど、円を五分割すれば座標が出ると描いてあってなるほどと膝をうった。数学関連の引き出しがあまりにも少ないのでこういうことが起きる。数学も勉強し直してみたいな。

createStar.js

createStar("test",150,100,50,"yellow");

function createStar(selector,x,y,r,color){
    //五芒星の時の角度
    var c1 = createCordinate(r,-90);
    var c2 = createCordinate(r,-234);
    var c3 = createCordinate(r,-18);
    var c4 = createCordinate(r,-162);
    var c5 = createCordinate(r,-306);
    
    var canvas = document.getElementById(selector);
    
    if(canvas == null){
        canvas = document.getElementsByClassName(selector)
    }
    
    var context = canvas.getContext('2d');
    context.fillStyle = color;
    context.lineWidth = 0;
        
    context.beginPath();
    context.moveTo(x,y-r);
    context.lineTo(c1.x + x, c1.y + y);
    context.lineTo(c2.x + x, c2.y + y);
    context.lineTo(c3.x + x, c3.y + y);
    context.lineTo(c4.x + x, c4.y + y);
    context.lineTo(c5.x + x, c5.y + y);
    context.closePath();
        
    context.fill();
    //context.stroke();
    
    function createCordinate(r,angle){
        var x = r * Math.cos(angle / 180 * Math.PI);
        var y = r * Math.sin(angle / 180 * Math.PI);
        
        return {
            "x" : x,
            "y" : y
        };
    }
}

こんなのが簡単に描けます。

赤い背景に黄色い星を描くだけでヴェトナムの国旗のできあがり。

jsdoitに置いてあります。
http://jsdo.it/tomato360/rfgJ