El canvas de HTML 5 (V). Relleno sólido.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

Ya estamos bastante familiarizados con el uso de las figuras de trazo en los canvas. En este artículo vamos a ampliar los conocimientos que ya tenemos, para ver como podemos crear figuras sólidas, tanto con contorno como sin él.

En lo que veamos en este artículo emplearemos colores planos (no gradientes, ni texturas), para aprender a crear figuras con tonos sólidos o con el grado de transparencia que deseemos en cada caso. Así que, hala. Prepara el bote de pintura, y vamos a pintar.

FIGURAS RELLENAS

En este ejemplo vamos a ver como dibujar figuras en las que solo pondremos el relleno (sin contorno) y, para acabar, una figura (un texto) en la que pondremos contorno y relleno. El resultado final quedará como ves a continuación:

En realidad, los métodos empleados para posicionar coordenadas, mover el puntero de dibujo en el canvas, etc. son, exactamente, los mismos que ya conocemos. Lo único que tenemos que hacer es reemplazar la palabra stroke (que, en entornos de dibujo se refiere a trazos) por fill (rellenar). Así pues:

El método stroke() se sustituye por el método fill().

El método strokeRect() se sustituye por fillRect().

El método strokeText() se sustituye por fillText().

En lugar de la propiedad strokeStyle, para definir el color de un trazo, usamos fillStyle, que define el color de un relleno.

Incluso pueden combinarse stroke() y fill(), para obtener figuras con contorno y relleno, como es el caso del texto en nuestro ejemplo.

Todo esto puedes verlo en canvas_009.htm. Si te paras a mirarlo, aparte de la diferencia de emplear fill en lugar de stroke, lo demás todo te tiene que ser ya familiar.

Quiero llamar tu atención en la línea resaltada, donde establecemos el color del círculo. Observa que le hemos puesto un alfa de 0.6, lo que le da cierta transparencia. Esto puede apreciarse gracias a que está solapando parcialmente a otra figura.

Como siempre, te dejo el código en este enlace. Nos vemos en el siguiente artículo de esta serie.

     

Deja un comentario

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