En este post recopilo algunos ejemplos de figuras geométricas dibujadas sobre un lienzo o canvas (elemento de HTML5) usando el lenguaje de programación JavaScript.
Las figuras que veremos son:
Nota: recuerda que ya vimos cómo dibujar triángulos, y también cómo dibujar rectángulos o cuadrados.
Para dibujar las figuras vamos a unir unas simples líneas con lineTo.
El color del trazo o borde se define con strokeStyle
, el mismo puede ser el nombre de un color (como red, yellow, etcétera) o su valor hexadecimal, entre otros.
Para el color de relleno se usa fillStyle
que funciona igual que strokeStyle
.
La mayoría de figuras usan el método lineTo
que dibuja una línea que termina en las coordenadas que pasamos a la función.
El método closePath
se encarga de unir los cabos o puntos restantes si lo queremos ver así.
El rombo se dibuja con líneas; bien podría dibujarse con la función rect
y después rotarlo, pero para este caso lo haremos así.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Rombo con canvas</title>
</head>
<body>
<h1>Rombo 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 = "#C2185B";
// Comenzamos la ruta de dibujo, o path
contexto.beginPath();
// Nos movemos a la "punta" superior
contexto.moveTo(55, 5);
// Dibujamos la línea que va hacia la derecha
contexto.lineTo(105, 55);
// Ahora la que va hacia abajo
contexto.lineTo(55, 105);
// Ahora la que va hacia la izquierda
contexto.lineTo(5, 55);
// Y dejamos que la última línea la dibuje JS
contexto.closePath();
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
El código es el siguiente, igualmente se usan líneas:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Romboide con canvas</title>
</head>
<body>
<h1>Romboide 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 = "#673AB7";
// Comenzamos la ruta de dibujo, o path
contexto.beginPath();
// Mover a la esquina superior izquierda
contexto.moveTo(25, 5);
// Dibujar la línea hacia la derecha
contexto.lineTo(125, 5);
// Ahora la que va hacia abajo
contexto.lineTo(105, 80); // A 80 porque esa es la altura
// La que va hacia la izquierda
contexto.lineTo(5, 80);
// Y dejamos que la última línea la dibuje JS
contexto.closePath();
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
De nuevo se usan líneas, ya que no hay una función nativa que haga esto.
El código para dibujar el trapecio en un canvas es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Trapecio con canvas</title>
</head>
<body>
<h1>Trapecio 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 = "#1565C0";
// Comenzamos la ruta de dibujo, o path
contexto.beginPath();
// Mover a la esquina superior izquierda
contexto.moveTo(25, 5);
// Dibujar la línea hacia la derecha
contexto.lineTo(125, 5);
// Ahora la que va hacia abajo
contexto.lineTo(125, 80); // A 80 porque esa es la altura
// La que va hacia la izquierda
contexto.lineTo(5, 80);
// Y dejamos que la última línea la dibuje JS
contexto.closePath();
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
El código es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Trapezoide con canvas</title>
</head>
<body>
<h1>Trapezoide 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 = "#81C784";
// Comenzamos la ruta de dibujo, o path
contexto.beginPath();
// Mover a la esquina superior izquierda
contexto.moveTo(25, 5);
// Dibujar la línea hacia la derecha
contexto.lineTo(115, 25);
// Ahora la que va hacia abajo
contexto.lineTo(145, 80); // A 80 porque esa es la altura
// La que va hacia la izquierda
contexto.lineTo(5, 80);
// Y dejamos que la última línea la dibuje JS
contexto.closePath();
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
Lo mismo, son solo líneas que se unen. Recuerda que un pentágono tiene 5 lados.
El código es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pentágono con canvas</title>
</head>
<body>
<h1>Pentágono 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 = "#9CCC65";
// Comenzamos la ruta de dibujo, o path
contexto.beginPath();
// La esquina de arriba ( o como se llame, soy programador, no matemático)
contexto.moveTo(100, 5);
// Dibujar hacia la derecha y arriba o centro
contexto.lineTo(145, 38);
// Ahora hacia la derecha y abajo
contexto.lineTo(130, 80);
// Ahora hacia la izquierda y abajo
contexto.lineTo(70, 80);
// Izquierda arriba
contexto.lineTo(55, 38);
// Y dejamos que la última línea la dibuje JS
contexto.closePath();
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
El hexágono tiene 6 lados y se dibuja con líneas, al igual que la mayoría de figuras aquí presentes.
El código es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Hexágono con canvas</title>
</head>
<body>
<h1>Hexágono 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 = "#D4E157";
// Comenzamos la ruta de dibujo, o path
contexto.beginPath();
// Esquina superior izquierda
contexto.moveTo(35, 5);
// Línea recta superior
contexto.lineTo(95, 5);
// Esquina central derecha
contexto.lineTo(125, 55);
// Esquina inferior derecha
contexto.lineTo(95, 105);
// Línea recta inferior
contexto.lineTo(35, 105);
// Esquina central izquierda
contexto.lineTo(5, 55);
// Y dejamos que la última línea la dibuje JS
contexto.closePath();
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
Siguiendo con las figuras geométricas con JavaScript y canvas, veamos cómo dibujar una figura de 7 lados.
Se utiliza únicamente el método lineTo
.
El código se puede ver a continuación:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Heptágono con canvas</title>
</head>
<body>
<h1>Heptágono 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 = "#FFEB3B ";
// Comenzamos la ruta de dibujo, o path
contexto.beginPath();
// Esquina superior izquierda
contexto.moveTo(35, 5);
// Línea recta superior
contexto.lineTo(95, 5);
// Esquina central derecha
contexto.lineTo(125, 45);
// Esquina inferior derecha
contexto.lineTo(115, 95);
// Esquina inferior central
contexto.lineTo(65, 115);
// Esquina inferior izquierda
contexto.lineTo(15, 95);
// Esquina central izquierda
contexto.lineTo(5, 45);
// Y dejamos que la última línea la dibuje JS
contexto.closePath();
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
Con estos ejemplos de dibujos de figuras geométricas con JavaScript podemos crear formas todavía más complejas, por ejemplo, una figura de 8 lados, una de nueve, etcétera.
Más adelante traeré formas de dibujar una elipse y un círculo.
Hoy te voy a presentar un creador de credenciales que acabo de programar y que…
Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…
En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…
En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…
Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…
En este artículo te voy a enseñar cómo usar un "top level await" esperando a…
Esta web usa cookies.