Crear una cuadrícula sobre un Canvas de HTML5

31/Ago/2012 HTML5 , 2 Comentarios

En este ejemplo con el CANVAS de HTML5 vamos a generar una cuadrícula sobre el CANVAS , generando el efecto de un papel cuadriculado. De esta forma veremos como funcionan los métodos .moveTo() y la capacidad de dibujar líneas con .lineTo().

El resultado buscado será el siguiente:

Lo primero será definir el CANVAS :

  1. <canvas height="300px" width="300px" id="micanvas">

Y cargar el CANVAS :

  1. var canvas = document.getElementById("micanvas");
  2. var ctx = canvas.getContext("2d");

Para generar el efecto de cuadrícula sobre el CANVAS vamos a crear dos bucles que dibujen líneas: uno horizontal y otro verticalmente. En el bucle lo que iremos será ir moviendo el punto de inicio de 10 pixels en 10 pixels hacía un lado o hacía otro.

  1. for (var x=0; x<=300; x=x+10){
  2. ctx.moveTo(x,0);
  3. ctx.lineTo(x,300);
  4. }

Vemos que vamos cambiando las coordenadas del origen de la línea mediante el método .moveTo(), el cual nos pone en el inicio de la trazada y con .lineTo() dibujamos la línea. Todo respetando los límites del CANVAS.

Ahora en la otra dirección, por la coordenada Y.

  1. for (var y=0; y<=300; y=y+10){
  2. ctx.moveTo(0,y);
  3. ctx.lineTo(300,y);
  4. }

Para que finalmente se pueda dibujar la cuadrícula nos quedan dos cosas: definir el color de las líneas y forzar su pintado mediante el método .stroke().

  1. ctx.strokeStyle = "#f00";
  2. ctx.stroke();

Ya tenemos creada una cuadrícula sobre un CANVAS de HTML5.

2 comentarios en “Crear una cuadrícula sobre un Canvas de HTML5”

Víctor Cuervo

Gonzalo

Genial que estés haciendo este tipo de tutoriales, yo ocupe el mismo sistema de cuadrículas para hacer el automata celular de life. aquí te dejo el código y el acceso al programa corriendo.
http://blog.en1mes.com/2014/01/html5-es-mucho-mas-que-un-doctype/

Responder a Gonzalo Cancelar respuesta

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*