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