Método HTML canvas arc()
Definición y uso
arc() El método crea arcos/curvas (usado para crear círculos o partes de círculos).
Consejo:Si desea crear un círculo usando arc(), configure el ángulo de inicio como 0，se establece el ángulo final como 2*Math.PI.
Consejo:Por favor, utilice stroke() o fill() El método dibuja una 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 de los parámetros
| Parámetros | 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 inicial, en radianes. (La posición del círculo a las 3 en punto es 0 grados). |
| eAngle | Ángulo final, 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 por primera vez 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>.
