読者です 読者をやめる 読者になる 読者になる

Panda Noir

JavaScript の限界を究めるブログです。

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

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

説明

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

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

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

コード

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座標、正六角形の一辺の長さを渡します。応用するとこうなります。 2013-03-15 10.23.37.png