HTML5 の canvas で円を描く

円の描き方

canvas の使い方として、今度は円を描く方法を調べる。 点(70, 70)から 半径 50 の円を描くにはどうするか。次のコマンドを使う。

      ctx.beginPath();
      ctx.arc(70, 70, 50, 0, Math.PI*2, false);
      ctx.stroke();

円弧を描くメソッドは arc である。引数の意味は次の通り。

arc(x, y, radius, startAngle, endAngle, anticlockwise)
   (x, y) を中心の位置、r を半径、startAngle を開始位置、endAngle を終端位置、
    anticlockwise を方向 (デフォルトは時計回り) とする円弧を描く。

完全な円を描くときも arc を使う。開始位置を 0 、終端位置を Math.PI * 2 とすることで完全な円になる。

今回は座標変換を考えない。そのかわり線分との組み合わせを考えよう。 この円に内接する六角形を作ってみる。

上記の円周上の格子点として A(30, 40), B(40, 110), C(100, 110), D(110, 100), E(120, 70), F(110, 40) をとってみて、 六角形 ABCDEF を描いた結果である。 パスカルの定理によって、直線 AB と DE の交点 P, 直線 BC と直線 EF の交点 Q, 直線 CD と直線 FA の交点 R は一直線上にある。

次は、上で描いた六角形 ABCDEF に、 対辺の延長の交点を描いた図である。

参考　http://www.html5.jp/canvas/how2.html

同心円を描く

同心円を描こうとして次のようにコードを記述した。

      ctx.beginPath();
      ctx.arc(100, 100, 80, 0, Math.PI*2, false);
      ctx.arc(100, 100, 60, 0, Math.PI*2, false);
      ctx.arc(100, 100, 40, 0, Math.PI*2, false);
      ctx.arc(100, 100, 20, 0, Math.PI*2, false);
      ctx.stroke();

ところが、同心円内部右側に、線が表示されてしまう。 これは、ひとつの円の軌跡解釈実行後に次の円に解釈実行にいくとき、 プロッターでいう「ペンを降ろしたまま」になってしまっていることが原因である。 線を出さないためには、「ペンを上げて目標座標で降ろす」処理を行なう ctx.moveTo を使って、 次のように記述しなければならない。

      ctx.beginPath();
      ctx.arc(100, 100, 80, 0, Math.PI*2, false);
      ctx.moveTo(160, 100);
      ctx.arc(100, 100, 60, 0, Math.PI*2, false);
      ctx.moveTo(140, 100);
      ctx.arc(100, 100, 40, 0, Math.PI*2, false);
      ctx.moveTo(120, 100);
      ctx.arc(100, 100, 20, 0, Math.PI*2, false);
      ctx.stroke();

なんか変な仕様だ。しかしこのように決められているのだから仕方がない。

参考 https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes#Moving_the_pen