En este post te voy a enseñar cómo usar la función rect
del contexto de un canvas en JavaScript para dibujar dos figuras geométricas:
También te voy a mostrar cómo personalizar el color de relleno y color de borde en cada una de las figuras.
La función rect
toma los siguientes argumentos:
O explicado de otra forma:
contexto.rect(x, y, anchura, altura)
Por lo tanto podemos dibujar un cuadrado y un rectángulo con esta función.
El grosor del borde se establece con lineWidth, el color de relleno con fillStyle y el color del borde con strokeStyle.
Recuerda que el color puede ser definido a través de su nombre o con un valor hexadecimal, entre otros.
Nota: en los ejemplos de código pongo comentarios para explicarlo de mejor manera.
Para dibujar un cuadrado sobre un canvas en JavaScript pasamos el mismo valor para la anchura y altura de rect
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Cuadrado con canvas</title>
</head>
<body>
<h1>Cuadrado 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 = "#F4511E";
// Dibujamos un rectángulo con lados iguales
contexto.rect(5, 5, 100, 100);
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
Para dibujar un rectángulo igualmente usamos la función rect
.
Veamos el ejemplo que dibuja un rectángulo sobre un canvas o lienzo de JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Rectángulo con canvas</title>
</head>
<body>
<h1>Rectángulo 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 = "#F44336";
// Dibujamos un rectángulo con la función rect
contexto.rect(5, 5, 50, 100);
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
Este rectángulo mide 50 x 100, si quieres que sea uno horizontal simplemente invierte las medidas.
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.