El método arc() se utiliza para crear un arco/curva, es decir, círculos o partes de círculos.
Sintaxis:
context.arc(x, y, r, sAngle, eAngle, counterclockwise);
Parámetros:
- x: este parámetro especifica la coordenada x del centro del círculo.
- y: este parámetro especifica la coordenada y del centro del círculo.
- r: este parámetro especifica el radio del círculo.
- sAngle: este parámetro especifica el ángulo inicial, en radianes (la posición de las 3 en punto del círculo del arco indica 0).
- eAngle: este parámetro especifica el ángulo final en radianes.
- en sentido contrario a las agujas del reloj: este parámetro especifica que el dibujo debe ser en sentido horario o antihorario. Es falso por defecto, lo que denota en el sentido de las agujas del reloj.
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas arc() Method
</title>
</head>
<body style="text-align:left;">
<h1>GeeksforGeeks</h1>
<h2>HTML canvas arc() Method</h2>
<canvas id="GFG" width="500" height="200">
</canvas>
<script>
var doc_id = document.getElementById("GFG");
var context = doc_id.getContext("2d");
context.beginPath();
context.strokeStyle = 'green';
context.arc(100, 50, 40, 0, 2 * Math.PI);
context.stroke();
</script>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
HTML canvas arc() Method
</title>
</head>
<body style="text-align:left;">
<h1>GeeksforGeeks</h1>
<h2>HTML canvas arc() Method</h2>
<canvas id="GFG" width="500" height="200">
</canvas>
<script>
var doc_id = document.getElementById("GFG");
var context = doc_id.getContext("2d");
context.beginPath();
context.fillStyle = 'green';
context.arc(100, 50, 40, 0, 2 * Math.PI);
context.fill();
</script>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con el método HTML canvas arc() se enumeran a continuación:
- Google Chrome
- Internet Explorer 9.0
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por shubham_singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA