HTML canvas arc() Methode

Maak een cirkel:

javascript:

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

Browserondersteuning

De getallen in de tabel geven de eerste browserversie aan die de methode volledig ondersteunt.

Method
arc()	Yes	9.0	Yes	Yes	Yes

De methode arc() maakt een boog/kromme (gebruikt om cirkels of delen van cirkels te maken).

Tip: Om een cirkel te maken met arc(): Stel de beginhoek in op 0 en de eindhoek op 2*Math.PI.

Tip: gebruik de methode stroke() of fill() om de boog daadwerkelijk op het canvas te tekenen.

Centrum

boog( 100,75 ,50,0*Math.PI,1.5*Math.PI)

Start hoek

boog(100,75,50, 0 ,1.5*Math.PI)

Eindhoek:

boog(100,75,50,0*Math.PI, 1.5*Math.PI )

JavaScript-syntaxis:	context .arc( x,y,r,sAngle,eAngle,tegen de klok in );

Parameter	Description	Play it
x	The x-coordinate of the center of the circle
y	The y-coordinate of the center of the circle
r	The radius of the circle
sAngle	The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
eAngle	The ending angle, in radians
counterclockwise	Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.