Comment puis-je obtenir les coordonnées x/y des premier et dernier points de l'arc dessiné par rapport au coin supérieur gauche de la toile?

Question

J'ai une toile carrée avec une largeur de 100 et une hauteur de 100. Dans ce carré, je dessine un arc comme ceci:

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 question est: Comment puis-je obtenir les coordonnées des x/y de le premier et le dernier point de la ligne dessinée par rapport au coin supérieur gauche de la toile?

Answer 1

Le point de départ est trivialement (x + radius, y). Le point final est, par simple trigonométrie, (x + radius*cos(angle), y + radius*sin(angle)). Notez que le point de départ dans ce cas est un cas particulier du point de terminaison plus général, avec angle égal à zéro. Ces valeurs doivent également être arrondies à l'entier le plus proche, pour des raisons évidentes.

(Notez que cela ne vaut que lorsque l'argument anticlockwise est faux, et en supposant que toutes les coordonnées sont mesurées à partir du haut à gauche. Si anticlockwise est vrai, inverser le signe du second composant de la coordonnée y. Si les coordonnées sont mesurées à partir Dans un autre coin, appliquez des arithmétiques simples pour corriger cela, notez aussi que ceci est complètement à l'envers pour tout vrai mathématicien.)