CanvasRenderingContext2D.arc()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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 estrue
, 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();
}
}
}
Screenshot | Live sample |
---|---|
Especificaciones
Specification |
---|
HTML Standard # dom-context-2d-arc-dev |
Compatibilidad con navegadores
BCD tables only load in the browser
Ver también
- La interfaz que lo define,
CanvasRenderingContext2D