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.
La sintaxis de la función arc
es la siguiente:
contexto.arc(x, y, radio, anguloInicio, anguloFin);
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.
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.
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();
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
.
El día de hoy te mostraré cómo crear un servidor HTTP (servidor web) en Android…
En este post te voy a enseñar a designar una carpeta para imprimir todos los…
En este artículo te voy a enseñar la guía para imprimir en una impresora térmica…
Hoy te voy a mostrar un ejemplo de programación para agregar un módulo de tasa…
Los usuarios del plugin para impresoras térmicas pueden contratar licencias, y en ocasiones me han…
Hoy voy a enseñarte cómo imprimir el € en una impresora térmica. Vamos a ver…
Esta web usa cookies.