Wie erhalte ich die x / y-Koordinaten der ersten und letzten Punkte des Hubzündungs ??relativ zu der oberen Ecke der Leinwand links?

Question

Ich habe eine quadratische Leinwand mit einer Breite von 100 und einer Höhe von 100. Innerhalb dieses Platzes zeichne ich einen Bogen wie folgt:

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

Die Frage ist: Wie bekomme ich die x / y-Koordinaten des ersten und letzten Punktes der gezeichneten Linie relativ zu dem oberen Ecke der Leinwand links

Answer 1

Der Ausgangspunkt ist trivialer (x + radius, y). Der Endpunkt ist durch einfachen trigonometrics, (x + radius*cos(angle), y + radius*sin(angle)). Beachten Sie, dass der Ausgangspunkt in diesem Fall ist ein Spezialfall des allgemeineren Endpunkts, mit angle gleich Null. Diese Werte auch auf die nächste ganze Zahl gerundet werden müssen, aus offensichtlichen Gründen.

(Dies gilt nur, wenn das anticlockwise Argument falsch ist, und angenommen werden alle Koordinaten von links oben gemessen. Wenn anticlockwise wahr ist, kehren die Vorzeichen der zweiten Komponente der y-Koordinate. Wenn Koordinaten von einem anderen gemessen werden Ecke, gelten einfache Arithmetik zu korrigieren diese. beachten Sie auch, dass dies für einen wirklichen Mathematiker ganz nach hinten ist.)