Canvasを使って正六角形をかいてみた

蜂の巣みたいなのをとりいれたデザインかっこ良そうとおもってCanvasの練習ついでにやってみました。

説明

正六角形なのですべての辺の長さが等しくなければなりません。でも、等しい長さを引くにしても角度が中途半端なので難しいです。では、どうやって引けばいいのでしょうか?

ここで、正六角形の内角のひとつが120度であることに注目します。すると、当然外角は60度です。これを利用しましょう。 BとCを斜辺とした直角三角形BCGを書きます。すると∠GBCは60度のため、ABをxとすると三平方の定理よりGB=1/2x、GC=√3/2xとなります。

ここまでわかったらあとは関数でまとめて再利用しやすいようにして完成です。

コード

if(document.getElementById("board").getContext){
    var ctx=document.getElementById("board").getContext("2d");
}else{
    return false;
}
ctx.drawHexagon=function(posx,posy,length){
    this.moveTo(posx, posy);
    this.lineTo(posx+length,posy);
    this.lineTo(posx+length+length/2,posy+route3*length/2);
    this.lineTo(posx+length,posy+route3*length/2+route3*length/2);
    this.lineTo(posx,posy+route3*length/2+route3*length/2);
    this.lineTo(posx-length/2,posy+route3*length/2);
    this.lineTo(posx,posy);
}
ctx.drawHexagon(30,30,20);

drawHexagonメソッドには、描写開始位置のx座標、y座標、正六角形の一辺の長さを渡します。応用するとこうなります。