Как получить координаты 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();

Вопрос в том, как мне получить х / укоординаты первой и последней точек нарисованной линии относительно верхнего левого угла холста?

Answer 1

Начальная точка тривиальна (x + radius, y). Конечная точка, по простой тригонометрии, (x + radius*cos(angle), y + radius*sin(angle)). Обратите внимание, что начальная точка в этом случае является частным случаем более общей конечной точки, где angle равно нулю. Эти значения также должны быть округлены до ближайшего целого числа по понятным причинам.

(Обратите внимание, что это применимо только в том случае, если аргумент anticlockwise равен false, и при условии, что все координаты измерены сверху слева. Если anticlockwise - true, поменяйте местами знак второго компонента координаты y. Если координаты измеряются из другого угла, примените простую арифметику, чтобы исправить это. Также обратите внимание, что для любого настоящего математика это полностью наоборот.)