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