HTML canvas arc() metode

Definition og brug

arc() Metode til at oprette arcer/kurver (bruges til at oprette cirkler eller dele af cirkler).

Tip:For at oprette en cirkel ved hjælp af arc(), sæt startvinklen til 0og sæt afslutningsvinklen til 2*Math.PI.

Tip:Brug stroke() eller fill() Metoden tegner faktiske arcer på canvas.

Bue/kurve
  • Centrum: arc(100,75,50,0*Math.PI,1.5*Math.PI)
  • Startvinkel: arc(100,75,50,0,1.5*Math.PI)
  • Afslutningsvinkel: arc(100,75,50,0*Math.PI,1.5*Math.PI)

Eksempel

Opret en cirkel:

Din browser understøtter ikke HTML5 canvas tagget.

JavaScript:

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

Prøv det selv

Syntaks

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

Parameter værdi

Parameter Beskrivelse
x Cirkelkernens x-koordinat.
y Cirkelkernens y-koordinat.
r Cirkelradiusen.
sAngle Startvinklen, målt i radianer. (Cirkelens tredje klokkeslæt er 0 grader).
eAngle Afslutningsvinklen, målt i radianer.
counterclockwise Valgfri. Angiver om tegning skal foregå medurskifte eller modurskifte. False = modurskifte, true = medurskifte.

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter egenskaben.

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

Bemærk:Internet Explorer 8 og tidligere versioner understøtter ikke <canvas>-elementet.