Método HTML canvas arc()

Crie um círculo:

JavaScript:

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

Suporte ao navegador

Os números na tabela especificam a primeira versão do navegador que oferece suporte total ao método.

Method
arc()	Yes	9.0	Yes	Yes	Yes

O método arc() cria um arco/curva (usado para criar círculos ou partes de círculos).

Dica: Para criar um círculo com arc(): Defina o ângulo inicial como 0 e o ângulo final como 2*Math.PI.

Dica: Use o método stroke() ou fill() para realmente desenhar o arco na tela.

Centro

arco( 100,75 ,50,0*Math.PI,1,5*Math.PI)

Ângulo inicial

arco(100,75,50, 0 ,1,5*Math.PI)

Ângulo final

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

Sintaxe JavaScript:	context .arc( x,y,r,sAngle,eAngle,anti-horário );

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.