キャンバスの左上隅に比べて、描画されたアークの最初と最後のポイントのx/y座標を取得するにはどうすればよいですか？

Question

幅100と高さ100の正方形のキャンバスがあります。その正方形の中には、次のように弧を描きます。

var canvas = document.getElementById('myCanvas');
var ctx    = canvas.getContext('2d');
ctx.clearRect(0,0,100,100) // clears "myCanvas" which is 100pixels by 100 pixels
ctx.beginPath();
ctx.arc( 50, 50, 30, 0, Math.PI*2/6 , false )
ctx.stroke();

問題は、キャンバスの左上隅に比べて、描画された線の最初と最後のポイントのx/y座標を取得するにはどうすればよいですか？

Answer 1

出発点は些細なことです (x + radius, y). 。エンディングポイントは、単純な三角測量によるものです。 (x + radius*cos(angle), y + radius*sin(angle)). 。この場合の出発点は、より一般的な終了点の特別なケースであり、 angle ゼロに等しい。また、これらの値は、明らかな理由から、最も近い整数に丸められる必要があります。

（これは、の場合にのみ適用されることに注意してください anticlockwise 引数はfalseであり、すべての座標が左上から測定されると仮定します。もしも anticlockwise 本当です、Y座標の2番目のコンポーネントの符号を逆にします。座標が別のコーナーから測定されている場合は、単純な算術を適用してこれを修正します。また、これは本当の数学者にとって完全に後方にあることに注意してください。）