Dibujar arreglo en canvas con JavaScript
En este artículo de programación te mostraré cómo pintar o dibujar un arreglo (array, vector, como lo conozcas) en un canvas de JavaScript, logrando hacer una cuadricula.
Es decir, a partir de una matriz en JavaScript, dibujar una cuadricula en Canvas. Esto es útil por ejemplo al hacer un juego como snake, pues si tratamos todo como un arreglo, podemos desarrollar el juego en el mismo y luego solo pintar la matriz en el canvas.
Para dibujar un simple rectángulo, podemos usar fillRect
una vez obtenido el contexto del canvas. La sintaxis es:
contexto.fillRect(x, y, ancho, alto);
Como nosotros vamos a dibujar una cuadricula, el ancho y el alto serán el mismo. Lo que va a cambiar será x e y que iremos modificando dentro del ciclo que dibujará la matriz en el canvas usando JavaScript.
Por cierto, te invito a ver cómo dibujar figuras en Canvas en caso de que quieras profundizar en el tema.
Vamos a dibujar una matriz en canvas, así que necesitamos un arreglo de arreglos. Para hacer esto más interesante, el color estará definido dentro de cada elemento del arreglo (además del color, podemos especificar más propiedades, pero eso es otra historia) el cual es un objeto.
const cuadricula = [
[{ color: "#eaeaee" }, { color: "#dddffa" }, { color: "#aaffff" }],
[{ color: "#00ffff" }, { color: "#11ff22" }, { color: "#001122" }],
[{ color: "#66bbcc" }, { color: "#aa44aa" }, { color: "#aaffbb" }],
[{ color: "#281196" }, { color: "#ffdffa" }, { color: "#210697" }],
[{ color: "#eaeaee" }, { color: "#ff00ff" }, { color: "#ffeeff" }],
];
Vamos a dibujar esa matriz usando JavaScript.
Veamos el código HTML; declaramos un canvas vacío con el id canvas
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Dibujar arreglo en canvas (cuadrícula) - By parzibyte</title>
</head>
<body>
<h1>Dibujar arreglo en Canvas</h1>
<a href="https://parzibyte.me/blog">By Parzibyte</a>
<br><br>
<canvas width="500px" height="500px" id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
Luego, dentro del script recorremos la fila, dentro de la fila el cuadrado y vamos pintando. Si te fijas tenemos unos ayudantes de x e y que van aumentando o reiniciando de acuerdo al paso del ciclo:
/*
https://parzibyte.me/blog
*/const cuadricula = [
[{ color: "#eaeaee" }, { color: "#dddffa" }, { color: "#aaffff" }],
[{ color: "#00ffff" }, { color: "#11ff22" }, { color: "#001122" }],
[{ color: "#66bbcc" }, { color: "#aa44aa" }, { color: "#aaffbb" }],
[{ color: "#281196" }, { color: "#ffdffa" }, { color: "#210697" }],
[{ color: "#eaeaee" }, { color: "#ff00ff" }, { color: "#ffeeff" }],
];
const $canvas = document.querySelector("#canvas");
const contexto = $canvas.getContext("2d");
const MEDIDA_CUADRO = 100;
// Comenzar a dibujar
// x e y nos van a ayudar a dibujar usando las medidas de pixeles
let y = 0, x = 0;
for (const fila of cuadricula) {
x = 0;
for (const cuadro of fila) {
// Indicamos el color que usaremos
contexto.fillStyle = cuadro.color;
// Y creamos el rectángulo en la posición X con Y, usando la misma altura y anchura
contexto.fillRect(x, y, MEDIDA_CUADRO, MEDIDA_CUADRO);
x += MEDIDA_CUADRO;
}
y += MEDIDA_CUADRO;
}
En la línea 11 obtenemos el canvas usando querySelector. Cada cuadro mide 100 pixeles en ambos lados. La salida es:
Ahora podríamos actualizar o modificar la matriz, y volver a dibujar cada determinado tiempo, dando la ilusión de que los cuadros se mueven o cambian de lugar.
He hecho este tutorial porque hace unos días terminé de crear el juego de tetris en JavaScript, en donde utilizo una matriz con puntos y coordenadas, así que el principio parte de esto que demuestro aquí.
Aquí puedes leer más sobre JavaScript, si quieres.
En este post te quiero compartir un código de C++ para listar y cancelar trabajos…
Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…
Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…
Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…
Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…
Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…
Esta web usa cookies.