Canvasで正多角形をかく方法

この間、正六角形をかく方法を書きました。でも、どうせなら正多角形をやりたいとおもって考えました。

方法

三角関数を使えばよかったんですね。今年の4月で高校生なのでまだ三角関数を独学でしかやってないので悩みましたが、なんとか書き上げました。では実際のコードをさくっとかきます。

if(document.getElementById("board").getContext){
    var ctx=document.getElementById("board").getContext("2d");
}else{
    return false;
}
ctx.draw=function(posx,posy,n,length){
    this.beginPath();
    var m=Math,rotate,start_rad,end_rad;
    if(n%2==0) rotate=360/n/2+180;
    else rotate=180;
    for(var i=0;i<n;i+=1){
        start_rad=(360/n*(i-1)+rotate)*m.PI/180;
        end_rad=(360/n*i+rotate)*m.PI/180
        this.moveTo(posx+m.sin(start_rad)*length,posy+m.cos(start_rad)*length);
        this.lineTo(posx+m.sin(end_rad)*length,posy+m.cos(end_rad)*length);
    }
    this.closePath();
    this.stroke();
}

若干いつもみる形になるように調整してあります。原理は360度をnでわって、その数字を引数としてsinとcosを使います。あとは調整とかをして完成です。やや適当なつくりとなってしまいました。

終わりに

未だに三角関数はうまく使いこなせていないので、はやく高校にいって学びたいです。また、高校では漸化式などプログラミングに必要…とまではいかなくとも重要なものもたくさんあるので楽しみです。