Método Canvas arc()
Definición y uso
arc() Método para crear arcos/curvas (se utiliza para crear círculos o partes de círculos).
Consejo:Para crear un círculo mediante arc(), configure el ángulo de inicio a 0，configure el ángulo final a 2*Math.PI.
Consejo:Utilice stroke() o fill() El método dibuja un arco real en el lienzo.
- Centro: arc(
100,75,50,0*Math.PI,1.5*Math.PI) - Ángulo de inicio: arc(100,75,50,
0,1.5*Math.PI) - Ángulo final: arc(100,75,50,0*Math.PI,
1.5*Math.PI)
Ejemplo
Crear un 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();
Sintaxis
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
Valor del parámetro
| Parámetro | Descripción |
|---|---|
| x | Coordenada x del centro del círculo. |
| y | Coordenada y del centro del círculo. |
| r | Radio del círculo. |
| sAngle | Ángulo de inicio, medido en radianes. (La posición de las 3 en punto del círculo es de 0 grados). |
| eAngle | Ángulo final, medido en radianes. |
| counterclockwise | Opcional. Define si se debe dibujar en sentido horario o antihorario. False = en sentido horario, true = en sentido antihorario. |
Compatibilidad del navegador
Los números en la tabla indican la versión del navegador que admite completamente la propiedad.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.
