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