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.

Dibujar cuadrado en 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.

Declarando matriz

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.

Vamos a dibujar esa matriz usando JavaScript.

Dibujando matriz

Veamos el código HTML; declaramos un canvas vacío con el id canvas:

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:

En la línea 11 obtenemos el canvas usando querySelector. Cada cuadro mide 100 pixeles en ambos lados. La salida es:

Dibujar arreglo en canvas con JavaScript

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í.

Si quieres puedes probar el ejemplo en este enlace. Aquí puedes leer más sobre JavaScript, si quieres.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 3,234 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

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

A %d blogueros les gusta esto: