Μέθοδος HTML canvas arc()

Ορισμός και χρήση

arc() Η μέθοδος αυτή δημιουργεί έλκη/κривές (χρησιμοποιείται για τη δημιουργία κύκλων ή μερών κύκλων).

Σημείωση:Για να δημιουργήσετε έναν κύκλο μέσω του arc(), ορίστε τη γωνία έναρξης σε 0και η γωνία λήξης ορίζεται σε 2*Math.PI.

Σημείωση:Χρησιμοποιήστε stroke() ή fill() Η μέθοδος αυτή ζωγραφίζει πραγματικά το έλκος στο χαρτί.

κύκλος/καμπύλη
  • Κέντρο: arc(100,75,50,0*Math.PI,1.5*Math.PI)
  • Γωνία έναρξης: arc(100,75,50,0,1.5*Math.PI)
  • Γωνία λήξης: arc(100,75,50,0*Math.PI,1.5*Math.PI)

Παράδειγμα

Δημιουργία ενός κύκλου:

Ο περιηγητής σας δεν υποστηρίζει το ετικέτα HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

Δοκιμάστε το προσωπικά

Γραμματική

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

Παράμετροι τιμών

Παράμετροι Περιγραφή
x Η συντεταγμένη x του κέντρου του κύκλου.
y Η συντεταγμένη y του κέντρου του κύκλου.
r Η ακτίνα του κύκλου.
sAngle Αρχή γωνίας, μετρημένο σε ακτίνες. (Η γωνία του κύκλου στις 3 το μεσημέρι είναι 0 βαθμούς).
eAngle Τέλος γωνίας, μετρημένο σε ακτίνες.
counterclockwise Προαιρετικό. Προσδιορίζει αν η διαγράμμιση θα γίνει κατά μήκος της αντίθετης κατεύθυνσης του ρολογιού ή κατά μήκος της κατεύθυνσης του ρολογιού. False = κατά μήκος της κατεύθυνσης του ρολογιού, true = κατά μήκος της αντίθετης κατεύθυνσης του ρολογιού.

Υποστήριξη του προγράμματος περιήγησης

Ο αριθμός στη τάβλη αναφέρει την έκδοση του πρώτου προγράμματος που υποστηρίζει αυτήν την ιδιότητα.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Σημείωση:Οι εκδόσεις του Internet Explorer 8 και παλιότερες δεν υποστηρίζουν το στοιχείο <canvas>.