¿Cómo puedo obtener las coordenadas X / Y de los primeros y últimos puntos del arco dibujado con respecto a la esquina superior izquierda del lienzo?

Question

Tengo un lienzo cuadrado con una anchura de 100 y una altura de 100. Dentro de ese cuadro que traza un arco de esta manera:

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();

La pregunta es: ¿Cómo puedo obtener las coordenadas X / Y de los primeros y el último punto de la línea trazada con relación a la esquina superior izquierda del lienzo

Answer 1

El punto de partida es trivialmente (x + radius, y). El punto final es, por trigonométricas simples, (x + radius*cos(angle), y + radius*sin(angle)). Tenga en cuenta que el punto de partida en este caso es un caso especial del punto final más general, con angle igual a cero. Estos valores también tienen que ser redondeado al número entero más cercano, por razones obvias.

(Tenga en cuenta que esto sólo se aplica cuando el argumento anticlockwise es falsa, y suponiendo que todas las coordenadas se miden desde la parte superior izquierda. Si anticlockwise es cierto, invierta el signo del segundo componente de la coordenada y. Si las coordenadas se miden de otra esquina, aplicar aritmética simple para corregir esto. también tenga en cuenta que esto es completamente imposible para cualquier matemático real.)