HTML5 の canvas で円を描く |
作成日:2015-03-28 最終更新日: |
canvas の使い方として、今度は円を描く方法を調べる。 これは点(70, 70)から 半径 50 の円を描いた結果である。 今回は座標変換を考えない。そのかわり線分との組み合わせを考えよう。 この円に内接する六角形を作ってみる。
上記の円周上の格子点として A(30, 40), B(40, 110), C(100, 110), D(110, 100), E(120, 70), F(110, 40) をとってみて、 六角形 ABCDEF を描いた結果である。
次は、上で描いた六角形 ABCDEF に、 対辺の延長の交点を描いた図である。
ctx.arc(100, 100, 50, 0, Math.PI*2, false);
参考 http://www.html5.jp/canvas/how2.html