En este post vamos a ver el uso de la función arc del contexto en un Canvas para poder dibujar círculos usando JavaScript.
Esta función permitirá dibujar un círculo completo o un medio círculo.
Función arc en contexto de canvas en JavaScript
La sintaxis de la función arc es la siguiente:
contexto.arc(x, y, radio, anguloInicio, anguloFin);
- Los primeros argumentos indican las coordenadas del centro del círculo.
- El radio indica el radio del círculo.
- Los últimos argumentos indican el ángulo de inicio y de fin; para un círculo completo el ángulo de inicio debería ser
0y el ángulo de fin debería serMath.PI * 2.
Nota: arc acepta un último parámetro booleano opcional que indica si su dirección debería ir al contrario de las manecillas del reloj; por defecto es false. Esto se ve de mejor manera cuando no se hace un círculo completo.
Estilos
El color de relleno se define con fillStyle, y el color de trazo se define con strokeStyle. Los colores pueden ser indicados por nombre o con un valor hexadecimal.
Dibujar círculo con JavaScript
Basta de charlas y veamos el código que dibuja un círculo en un canvas usando JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Círculo con canvas</title>
</head>
<body>
<h1>Círculo con canvas y JavaScript</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<br>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>/**
* Ejercicios con Canvas y JavaScript: dibujo de figuras geométricas
*
* https://parzibyte.me/blog
*/
const ALTURA_CANVAS = 200,
ANCHURA_CANVAS = 400;
// Obtener el elemento del DOM
const canvas = document.querySelector("#canvas");
canvas.width = ANCHURA_CANVAS;
canvas.height = ALTURA_CANVAS;
// Del canvas, obtener el contexto para poder dibujar
const contexto = canvas.getContext("2d");
// Estilo de dibujo
// Grosor de línea
contexto.lineWidth = 5;
// Color de línea
contexto.strokeStyle = "#212121";
// Color de relleno
contexto.fillStyle = "#FFCC80";
// Las variables indican el nombre de cada argumento para
// la función arc
let x = 100,
y = 100,
radio = 50,
anguloInicio = 0,
anguloFin = Math.PI * 2;
contexto.arc(x, y, radio, anguloInicio, anguloFin);
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();Medio círculo con JavaScript
Para dibujar la mitad de un círculo se puede usar igualmente la función arc. Solo hay que modificar el ángulo de inicio.
El código que dibuja medio círculo en JavaScript es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Medio círculo con canvas</title>
</head>
<body>
<h1>Medio círculo con canvas y JavaScript</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<br>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>/**
* Ejercicios con Canvas y JavaScript: dibujo de figuras geométricas
*
* https://parzibyte.me/blog
*/
const ALTURA_CANVAS = 200,
ANCHURA_CANVAS = 400;
// Obtener el elemento del DOM
const canvas = document.querySelector("#canvas");
canvas.width = ANCHURA_CANVAS;
canvas.height = ALTURA_CANVAS;
// Del canvas, obtener el contexto para poder dibujar
const contexto = canvas.getContext("2d");
// Estilo de dibujo
// Grosor de línea
contexto.lineWidth = 5;
// Color de línea
contexto.strokeStyle = "#212121";
// Color de relleno
contexto.fillStyle = "#FFCC80";
// Las variables indican el nombre de cada argumento para
// la función arc
let x = 100,
y = 100,
radio = 50,
anguloInicio = Math.PI,
anguloFin = Math.PI * 2;
contexto.arc(x, y, radio, anguloInicio, anguloFin);
// Una línea para la mitad del círculo, opcional
contexto.moveTo(x - radio - 2, y);
contexto.lineTo(x + radio + 2, y)
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();Si te fijas, solo cambia el ángulo inicio de 0 a Math.PI.
