Introducción al API de canvas (2)

Segunda entrada de la serie de canvas, en la cual veremos cómo se trabajan los rectángulos y los rellenos.

malevich

archivado en: JavaScript / 6 enero, 2013 / taller:

Rectángulos

Sigo con el api de canvas. En la entrada anterior vimos cómo se declara un lienzo y cómo dibujar líneas sencillas, en esta cómo realizar rectángulos, lo cual nos servirá para aprender cómo se trabajan los rellenos.

El método más sencillo para dibujar un rectángulo básico es rect(), al cual hay que pasar 4 parámetros por este orden:

  1. La coordenada x de la esquina superior izquierda.
  2. La coordenada y de la esquina superior izquierda.
  3. El ancho (width).
  4. El alto (height).

Como sucedía con las líneas, una vez definidos los parámetros de la figura, para que se dibuje hay emplear el método stroke(). Por ejemplo, así dibujamos un rectángulo de 75px de ancho por 100px de alto a partir de la coordenada 20, 20.

  • var mi_canvas = document.getElementById('mi_lienzo');
  • var mi_contexto = mi_canvas.getContext('2d');
  • mi_contexto.rect(20,20,75,100);
  • mi_contexto.stroke();

[singlepic id=55 w=361 h=212 float=center]

Podemos trabajar con el trazado de los rectángulos usando las mismas propiedades que vimos para las líneas sencillas, es decir: lineWidth para el ancho, lineCap para la confluencia de líneas, strokeStyle para el color, las sombras...

  • var mi_canvas = document.getElementById('mi_lienzo');
  • var mi_contexto = mi_canvas.getContext('2d');
  • mi_contexto.lineWidth="5";
  • mi_contexto.lineCap="round";
  • mi_contexto.shadowColor="#060";
  • mi_contexto.shadowBlur="10";
  • mi_contexto.shadowOffsetX="20";
  • mi_contexto.shadowOffsetY="20";
  • mi_contexto.strokeStyle="#900";
  • mi_contexto.rect(20,20,75,100);

[singlepic id=56 w=366 h=215 float=center]

Rellenos

En vez de rect(), se pueden usar otros dos métodos: strokeRect() para dibujar figuras sin relleno y fillRect() para que estén rellenas. En ambos casos, ya no es necesario indicar al final el método stroke(), pues es algo que ya hacen por sí mismos.

Cuando usamos fillRect, podemos definir el estilo en la propiedad fillStyle.

Para colores planos, sin opacidad, basta con especificar un valor hexadecimal: #900. Pero también se puede usar la modalidad rgba que incorporan las CSS3, que recordemos consiste en indicar 4 parámetros. En los tres primeros, el valor rojo, verde y azul, respectivamente, mediante un valor del 0 al 255; y, en el último, la opacidad en una escala del 0 al 1.

Esto se entiende bien si dibujamos dos figuras superpuestas y la superior con la mitad de la opacidad:

  • var mi_canvas = document.getElementById('mi_lienzo');
  • var mi_contexto = mi_canvas.getContext('2d');
  • mi_contexto.fillStyle="rgba(255,0,0,1)"; 
  • mi_contexto.fillRect(20,20,75,75);
  • mi_contexto.fillStyle="rgba(0,255,0,0.5)"; 
  • mi_contexto.fillRect(50,50,75,75);

[singlepic id=57 w=366 h=215 float=center]

Degradados

El código es algo más complejo en el caso de los degradados. Primero se define el degradado en una variable mediante las funciones createLinearGradient()createRadialGradient() y addColorStop(); y luego se indica esa variable en el valor de fillStyle.

La diferencia entre createLinearGradient() y createRadialGradient(), como se advierte por el nombre, es que la primera función crea un degradado lineal y la segunda radial.

A createLinearGradient() hay que pasarle 4 parámetros. Los dos primeros son las coordenadas x,y donde empieza el degradado y los segundos donde concluye, el punto de fuga para aclararnos. Estas coordenadas son respecto al lienzo, por lo tanto, para que coincida el comienzo del degradado con el punto inicial de la figura, deben ser las mismas. Y lo mismo para las coordenadas finales.

Por ejemplo, si es un cuadrado de 75 píxeles de ancho que comienza a dibujarse en las coordenadas 150 - 20:

  • mi_contexto.fillRect(150, 20, 75, 75);

El degradado parte de las mismas coordenadas y concluye 225 píxeles más allá, que es el resultado de añadir los 75px de ancho al punto inicial.

  • var mi_degradado = mi_contexto.createLinearGradient(150, 20, 225, 20);

Los puntos de inflexión entre un color y otro se definen con addColorStop(), en la que se indican 2 parámetros. En el primero el punto de inflexión entre un color y otro en una escala del 0 al 1 y en el segundo el color. Por ejemplo, para que el degradado sea homogéneo, el primer color debe estar en 0 y el segundo en 1; pero si queremos que toda la mitad derecha sea ya del segundo color, el punto de inflexión habría que indicarlo en 0.5.

  • var mi_degradado = mi_contexto.createLinearGradient(150, 20, 225, 20);
  • mi_degradado.addColorStop(0, "#0f0");
  • mi_degradado.addColorStop(1, "#f00");
  • mi_contexto.fillStyle = mi_degradado;
  • mi_contexto.fillRect(150, 20, 75, 75);

[singlepic id=58 w=366 h=215 float=center]

Aunque en el ejemplo solo he usado dos, se pueden añadir todos los colores que se quieran. Basta con ir declarando addColorStop uno detrás de otro.

Para hacer degradados radiales el sistema es el mismo, pero cambia la función y los parámetros. Hay que usar createRadialGradient(), a la que se pasan 6 parámetros:

  1. la coordenada x del centro del círculo inicial, desde donde debe empezar el degradado.
  2. la coordenada y del círculo inicial.
  3. el radio del círculo inicial.
  4. la coordenada x del centro del círculo final, donde debe concluir el degradado.
  5. la coordenada y del círculo final.
  6. el radio del círculo final.

  • var mi_canvas = document.getElementById('mi_lienzo');
  • var mi_contexto = mi_canvas.getContext('2d');
  • var mi_degradado_circular = mi_contexto.createRadialGradient(35, 35, 5, 50, 50, 60);
  • mi_degradado_circular.addColorStop(0, "#0f0");
  • mi_degradado_circular.addColorStop(1, "#f00");
  • mi_contexto.fillStyle = mi_degradado_circular;
  • mi_contexto.fillRect(5, 5, 75, 75);

[singlepic id=59 w=366 h=215 float=center]

En fin, la verdad es que si no manejas algún programa de dibujo vectorial, el mecanismo es complicado de entender.

Patrones

También se puede rellenar una figura con una imagen a modo de patrón. El proceso es similar al anterior. Primero almacenamos el patrón en una variable y luego la ponemos como valor de fillStyle. El método que permite definir el patrón es createPattern(), al que hay que pasar dos parámetros: la imagen a usar y el modo (repeat, repat-x, repeat-y, no-repeat).

Para definir la imagen existen dos posibilidades. Si se encuentra en la página, se puede recuperar su ID y luego enviarlo a createPattern():

  • ...
  • <body>
  • <img src="patron.jpg" id="patron" width="24" height="24">
  • ...
  • var imagen_patron=document.getElementById("patron")
  • var pat=mi_contexto.createPattern(imagen_patron, repeat);
  • ...

La segunda manera es crear un objeto con la imagen y luego utilizarla cuando se haya cargado (onload):

  • var imagen_relleno=new Image();
  • imagen_relleno.src="patron.png";
  • imagen_relleno.onload=function() {
  • relleno=mi_contexto.createPattern(imagen_relleno,"repeat");
  • mi_contexto.fillStyle=relleno;
  • mi_contexto.fillRect(5, 100, 200, 75);
  • }

[singlepic id=60 w=361 h=208 float=center]

Siluetas

Por último, mencionar que existe un método para «borrar» una zona ya dibujada y es clearRect(), al que se le pasan 4 parámetros, los mismos que se utilizan para dibujar un rectánguno normal. Es decir: la coordenada x, la y, el ancho y el alto.

var mi_degradado_circular = mi_contexto.createRadialGradient(35, 35, 5, 50, 50, 60);
mi_degradado_circular.addColorStop(0, "#0f0");
mi_degradado_circular.addColorStop(1, "#f00");

mi_contexto.fillStyle = mi_degradado_circular;
mi_contexto.fillRect(5, 5, 75, 75);
mi_contexto.clearRect(10, 15, 25, 25);

[singlepic id=61 w=361 h=208 float=center]

Bueno, pues por hoy ya está bien : )

|| Tags:

valoración de los lectores sobre Introducción al API de canvas (2)

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • 5 sobre 5 (1 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.