Tutorial für die Bogenfunktion von HTML Canvas

Question

Ich kann nicht herausfinden, was alle Parameter der Funktion arc() sind (durch Experimentieren) und ich habe keine Anleitung gefunden, die sie zu erklären scheint. Wo gibt es eine gute Erklärung der Funktion arc()?

Answer 1

arc(x, y, radius, startAngle, endAngle, anticlockwise)

Die ersten drei Parameter, x und y und Radius, beschreiben einen Kreis, der gezeichnete Bogen wird Teil dieses Kreises sein. startAngle und endAngle geben an, wo entlang des Kreises die Zeichnung beginnen und enden soll. 0 ist Osten, Math.PI/2 ist Süden, Math.PI ist Westen und Math.PI*3/2 ist Norden. Wenn anticlockwise 1 ist, wird die Richtung des Bogens umgekehrt.

https://developer.mozilla.org/En/Canvas_tutorial/Drawing_shapes#Arcs

In den beigefügten Diagrammen ist der einzige Unterschied der Linksdrehung. Math.PI/2 endet immer im Süden, egal ob im oder gegen den Uhrzeigersinn.

Answer 2

Ich hatte das gleiche Problem und habe eine kleine interaktive Seite erstellt, um das Problem zu lösen:

http://www.scienceprimer.com/drawing-circles-javascript-html5-canvas-element

Alle Parameter können angepasst werden und der resultierende Bogen wird in Echtzeit gerendert. Die Seite zeigt auch, wie die Methoden fill(), stroke() und closePath() mit der Methode arc() interagieren.

Answer 3

Según MDC :

arc(x, y, radius, startAngle, endAngle, anticlockwise)

x, y und Radius sind natürlich Kreisparameter. startAngle und endAngle sind im Bogenmaß, beginnend im Osten. anticlockwise ist ein boolescher Wert.

Answer 4

In diesem einfachen Beispiel finden Sie eine kurze Einführung in die Canvas- und Arc-Funktion von HTML5: http://pastebin.com/kxB7uJLD

Auf Wiedersehen.