サイト内検索

arcTo() メソッド

構文

context . arcTo(x1, y1, x2, y2, radius)

現在のパスにひとつの地点が追加され、その地点は直線によって直前の地点に接続されます。そして、現在のパスに 2 つ目の地点が追加され、その地点はプロパティが引数で指定される円弧によって直前の地点に接続されます。

指定の半径が負数なら、INDEX_SIZE_ERR 例外を投げます。

仕様

arcTo(x1, y1, x2, y2, radius) メソッドは、まず最初に (x1, y1) に対するサブパスを定義します。それから、その挙動は、下記の通り、引数とサブパスの最終地点に依存します。

radius に負の値が指定されると、INDEX_SIZE_ERR 例外が発生することになります。

地点 (x0, y0) を、サブパスの最終地点とします。

地点 (x0, y0) が地点 (x1, y1) と同じ、または、地点 (x1, y1) が地点 (x2, y2) と同じ、または、半径 radius が 0 なら、このメソッドはサブパスに地点 (x1, y1) を加え、その地点を直前の地点 (x0, y0) に直線で結ばなければいけません。

そうでなければ、地点 (x0, y0), (x1, y1), (x2, y2) すべてが一直線上にあるなら、このメソッドはサブパスに地点 (x1, y1) を加え、その地点を直前の地点 (x0, y0) に直線で結びます。

そうでなければ、Arc を、半径 radius となる円の円周によって与えられる最も短い円弧とします。それは、地点 (x0, y0) を通り、地点 (x1, y1) で終わる半直線に接する地点をひとつ持ちます。そして、それは、地点 (x1, y1) で終わり、地点 (x2, y2) を通る半直線に接する別の地点を持ちます。この円がこれら 2 つの直線に接する地点は、それぞれ、開始接点、終了接点と呼ばれます。このメソッドは、地点 (x0, y0) から開始接点までを直線で結び、開始接点をサブパスに加えます。それから、開始接点から終了接点までを Arc で結び、終了接点をサブパスに加えます。


原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-arcto

サンプル

arcToメソッドのサンプル
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.arcTo(80, 50, 20, 80, 10);
ctx.lineTo(20, 80);
ctx.stroke();

[arcTo() メソッドの実際のサンプル]

ブラウザ対応状況

Firefox Safari Chrome Opera IE ExplorerCanvas
2 △ 2 ○ 1 ○ 9.2 △ 9 ○ 0002 ×
3 △ 3 ○ 2 ○ 9.5 △   3 △
3.5 △ 4 ○ 3 ○ 10 △    
3.6 ○ 5 ○ 6 ○ 10.60 △    

Opera では、arcTo() メソッドは HTML5 の仕様と違う解釈がなされています。ExplorerCanvas では、このメソッドは存在しているものの、実際は何も作用することなく、あたかもこのメソッドが呼び出されなかったかのようにふるまいます。