Método Canvas arc()
Definição e uso
arc() Método para criar arco/curva (usado para criar círculos ou partes de círculos).
Dica:Para criar um círculo usando arc(), configure o ângulo inicial para 0， 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
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();
Sintaxe
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
Valor do parâmetro
| Parâmetro | 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, em radianos. (A posição circular das 3 horas é 0 graus). |
| eAngle | Ângulo final, em radianos. |
| counterclockwise | Opcional. Define 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:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.
