Dibujar círculo y medio círculo en Canvas con JavaScript

Dejar un comentario / HTML, javascript, web / Por

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 0 y el ángulo de fin debería ser Math.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

Círculo en canvas con arc

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.

Dibujar la mitad de un círculo con JavaScript

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *