CanvasRenderingContext2D.arc()

El método CanvasRenderingContext2D .arc() de la API de Canvas 2D añade un arco a la trayectoria centrada en la posición (x, y) con el radio r comenzando en startAngle y terminando en endAngle que va en la dirección dada en sentido antihorario (predeterminado en sentido  horario) .

Sintaxis

Void ctx .arc (x, y, radio, startAngle, endAngle, antihorario);

Parámetros

x
La coordenada x del centro del arco.
y
La coordenada y del centro del arco.
radius
El radio del arco.
startAngle
El ángulo en el que se inicia el arco, medido en sentido horario desde el eje x positivo y expresado en radianes.
endAngle
El ángulo en el que termina el arco, medido en sentido horario desde el eje x positivo y expresado en radianes.
anticlockwise Opcional
Un Boolean opcional que, si es true , hace que el arco se dibuje en sentido contrario a las agujas del reloj entre los dos ángulos. De forma predeterminada, se dibuja en el sentido de las agujas del reloj.

Ejemplos

Utilizando el método del arc

Esto es sólo un simple fragmento de código dibujando un círculo.

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI);
ctx.stroke();

Edite el código de abajo y vea su actualización de cambios en vivo en el lienzo:

Diferentes formas demostradas

En este ejemplo se dibujan diferentes formas para mostrar lo que es posible al usar arc() .

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// Draw shapes
for (var i = 0; i < 4; i++) {
  for(var j = 0; j < 3; j++) {
    ctx.beginPath();
    var x              = 25 + j * 50;               // x coordinate
    var y              = 25 + i * 50;               // y coordinate
    var radius         = 20;                    // Arc radius
    var startAngle     = 0;                     // Starting point on circle
    var endAngle       = Math.PI + (Math.PI * j) /2; // End point on circle
    var anticlockwise  = i % 2 == 1;                // Draw anticlockwise

    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

    if (i > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}

ScreenshotLive sample

Specifications

Compatibilidad del navegador

BCD tables only load in the browser

Notas específicas de Gecko

Comenzando con Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1):

  • El parámetro anticlockwise es opcional,
  • Especificar un radio negativo ahora arroja un error IndexSizeError ("Índice o tamaño es negativo o mayor que la cantidad permitida").

Ver también