Método HTML canvas arc()
Definição e uso
arc() O método cria arcos/curvas (usados para criar círculos ou partes de círculos).
Dica:Para criar um círculo usando arc(), configure o ângulo inicial para 0e configure o ângulo final para 2*Math.PI.
Dica:Use stroke() ou fill() O método desenha um arco real no canvas.
- centro: arc(
100,75,50,0*Math.PI,1.5*Math.PI) - ângulo inicial: arc(100,75,50,
0,1.5*Math.PI) - ângulo final: arc(100,75,50,0*Math.PI,
1.5*Math.PI)
Exemplo
Criar 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();
Sintaxe
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
Valor do parâmetro
| Parâmetros | Descrição |
|---|---|
| x | Coordenada x do centro da circunferência. |
| y | Coordenada y do centro da circunferência. |
| r | Raio da circunferência. |
| sAngle | Ângulo inicial, medido em radianos. (A posição circular do ponteiro das 3 horas é de 0 graus). |
| eAngle | Ângulo final, medido em radianos. |
| counterclockwise | Opcional. Determina se o desenho deve ser feito no sentido horário ou no sentido anti-horário. False = no sentido horário, true = no sentido anti-horário. |
Suporte do navegador
Os números na tabela indicam a versão do navegador que suportou a propriedade pela primeira vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Observação:Os navegadores Internet Explorer 8 e anteriores não suportam o elemento <canvas>.
