弧を描く(arcTo) [html5 の Canvas を使ってみる：第五回]

ではちょっと判りにくい「弧を描く」をやってみる。

★html 側

<canvas id="arcTo"></canvas>

★Javascript 側

onload = function() {
// 画面ロード時に描画を実行
  draw();
};
function draw() {
// id: arcTo で 2 次元描画を行うことの定義
  var c = document.getElementById("arcTo").getContext('2d');

// 描画をすることを宣言
  c.beginPath();
// 筆おろしの座標を x:0、y:80 に定義
  c.moveTo(0, 80);
// 座標を x:100、y:80 まで引く筈の線を
// x:20、y:20 へ向けて、半径 30 で弧を描く
  c.arcTo(100, 80, 20, 20, 30);
// これらの座標に対して線を引く指令
  c.stroke();
}

すると、こうなる。


しかしこれでは判りにくいので、補助線（x:0、y:80 から x:0、y:100 までの直線）を引いてみる。


このグニャっとなっている弧を伸ばすと、引いた補助線と重なるということになる。なので、arcTo(); の第一・第二引数は「伸ばした際の到達点」と考えて差し支えないと思う。そして、グニャっとなった弧の先端から向かっている座標が、arcTo(); の第三・第四引数となる。第五引数の半径分を確保できるだけ、グニャっと曲がるようである。なので、この半径を 10 に変えると、こうなる。

  c.arcTo(100, 80, 20, 20, 10);

確認環境：
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70

正常に動作しなかった環境：
Opera 10.53

W3C；
4.8.11 The canvas element — HTML 5