MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

El 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:

Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI, false);
ctx.stroke();</textarea>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

Diferentes formas demostradas

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

HTML
<canvas id="canvas" width="150" height="200"></canvas>
JavaScript
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

Especificación Estado Comentario WHATWG HTML Estándar de vida
La definición de 'CanvasRenderingContext2D.arc' en esa especificación.
Estándar de vida Status Comment
HTML Living Standard
The definition of 'CanvasRenderingContext2D.arc' in that specification.
Living Standard  

Compatibilidad del navegador

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

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

Etiquetas y colaboradores del documento

 Colaboradores en esta página: Mancux2
 Última actualización por: Mancux2,