Trabajando con color de relleno y de trazado en canvas

Estamos aprendiendo acerca del elemento Canvas del HTML 5 y vamos a presentar un artículo que nos servirá para darle un toque personal a nuestros diseños utilizando un poco de color. En el anterior artículo del Manual de Canvas del HTML 5 ya vimos un par de funciones para dibujo de rectángulos y ahora vamos a estudiar un poco mejor cuáles son las posibilidades para darles color. De paso, este par de ejemplos servirán para ilustrar un poco mejor el esquema de trabajo con canvas.

Para trabajar con color en los elementos canvas tenemos varias posibilidades, pero de momento vamos a aprender a modificar el color con el que se rellena o se dibuja trazados. Como vimos anteriormente, al dibujar rectángulos, podemos elegir entre dibujar sólo su contorno o dibujarlos rellenos de color (y luego veremos que esto es así con otros tipos de caminos). Ahora veremos que existen dos atributos del contexto del canvas que sirven para definir el color de relleno y el color de trazado a la hora de dibujar rectángulos u otros caminos.

Cambiar el color de relleno con fillStyle

Existe un atributo del contexto del canvas que almacena el color que se utilizará al rellenar elementos. Cambiar el color de relleno es tan sencillo como asignarle valores distintos, de colores en RGB, con lo que conseguiremos que la próxima vez que se rellene de color se haga con ese nuevo valor asignado.

ctx.fillStyle = '#990000';

Suponiendo que tenemos el objeto contexto de un canvas en la variable ctx, con la anterior línea estamos solicitando al elemento canvas que la próxima vez que se rellene el color se haga en rojo oscuro.

Cambiar el color de trazado con strokeStyle

Ahora bien, cuando dibujamos podemos elegir hacer sólo un trazado del rectángulo, u otro tipo de camino y para ello se utilizará otro color que podemos definir con strokeStyle. El atributo strokeStyle funciona de la misma manera que fillStyle, pero con la salvedad que servirá para indicar el color del trazado.

ctx.strokeStyle = '#000099';

Con esa línea estamos marcando que el color de trazado sea azul oscuro. Por lo cual, la próxima vez que se haga un trazado la línea será de ese color.

Otras notaciones para definir colores en canvas

Ahora podemos aprender cómo especificar colores en los elementos canvas. La verdad es que los que conozcan CSS no tendrán problema alguno para ello, ya que los formatos son exactamente los mismos. Por ejemplo, podremos utilizar estas notaciones.

• Color con nombre: "blue"
• Color con RGB hexadecimal, como se define en HTML: "#ff6600"
• Color con RGB en base decimal: "rgb(100, 25, 206)"
• Color RGBA (canal alpha o transparencia, como en CSS3): "rgba(255, 125, 0, 0.5)"
• Con RGB y porcentaje: "rgb(100%, 20%, 0)"

Nosotros podremos elegir la que más nos convenga según nuestro caso.

Ejemplo para cambiar el color de relleno

Veamos ahora un ejercicio que nos sirve de ejemplo para mostrar cómo cambiar el color de relleno. En concreto vamos a rellenar el canvas con muchos cuadraditos de colores aleatorios y además haremos que cada pocos instantes se vuelva a dibujar el canvas con nuevos cuadraditos aleatorios, con lo que generaremos nuestra primera y pequeña animación.

Si lo deseas, antes de continuar la lectura, puede ser interesante ver el ejemplo en marcha.

Veamos antes que nada un par de funciones para conseguir un color aleatorio en Javascript. La primera nos ofrece un número aleatorio y la segunda, que se apoya en la primera, nos sirve para generar una cadena que especifica un color.

function aleatorio(inferior,superior){
numPosibilidades = superior - inferior
aleat = Math.random() * numPosibilidades
aleat = Math.floor(aleat)
return parseInt(inferior) + aleat
}
function colorAleatorio(){
   return "rgb(" + aleatorio(0,255) + "," + aleatorio(0,255) + "," + aleatorio(0,255) + ")";
}

Ahora vamos a mostrar otra función para dibujar el lienzo de un canvas, rellenando de cuadraditos con colores aleatorios:

function cuadradosAleatorios(){
   for(i=0; i<300; i+=10){
      for(j=0; j<250; j+=10){
         contexto.fillStyle = colorAleatorio();
         contexto.fillRect(i,j,10,10)
      }
   }
}

Como se puede ver, tenemos un bucle anidado, que realiza la tarea. En cada iteración se obtiene un color aleatorio y luego se pinta un rectángulo con ese color. La función utiliza una variable global llamada "contexto", que es el contexto del canvas sobre el que estamos dibujando.

Ahora para acabar vamos a ver la función que se encargará de inicializar el contexto del canvas y definir la ejecución periódica de la función cuadradosAleatorios() para generar la animación.

//variable global contexto sin inicializar
var contexto;

window.onload = function(){
   //Recibimos el elemento canvas
   contexto = cargaContextoCanvas('micanvas');
   if(contexto){
      //Si tengo el contexto, defino la función periódica
      setInterval("cuadradosAleatorios(contexto)", 200);
   }
}

Todo esto junto hace que consigamos una animación en el canvas, pues se invoca a la función cuadradosAleatorios() cada 200 milisegundos, lo que genera dibujos aleatorios distintos cada poco tiempo.

Ahora podemos ver el ejemplo en marcha en una página aparte.

Ejemplo para cambiar el color del trazado

Hemos hecho el ejemplo anterior con una ligera modificación. En este segundo caso, en lugar de rellenar los rectángulos de color, vamos a dibujar sólo el trazado. Por supuesto, en cada paso del bucle se cambiará el color de trazado, en lugar del color de relleno. Además, los rectángulos cuyo trazado estamos dibujando serán un poco menor.

La única función que tiene cambios con respecto al ejemplo anterior es cuadradosAleatorios():

function cuadradosAleatorios(){
   for(i=0; i<300; i+=10){
      for(j=0; j<250; j+=10){
         contexto.strokeStyle = colorAleatorio();
         contexto.strokeRect(i,j,5,5)
      }
   }
}

El ejemplo cambiando esta función se puede ver en una página aparte.