CSS3 HTML5

Los nuevos estándares para el diseño y desarrollo web y Móvil

Capacitación HTML5

Transparencia en HTML5 Canvas

| 4 Comentarios

Trabajar con transparencias en HTML5 Canvas nos ofrece mucha posibilidades. Existen diversas formas de hacerlo, en este caso veremos como hacerlo de manera sencilla con RGBA.

En artículos anteriores, hemos tratado en profundidad como trabajar con el elemento Canvas de HTML5. Desde el trabajo con animación, hasta la planificación de la creación de videojuegos.

Al dar clases de HTML5, me han consultado en varias oportunidades como  podemos darle transparencia a un objeto que hayamos creado dentro de nuestro Canvas. Una forma práctica para lograrlo es al “pintar” o “llenar” la forma, hacerlo con RGBA. ¿Qué nos permite el RGBA? Muy sencillo, además de indica los colores Rojo, Verde y Azul, podemos darle un número más que indica el canal alfa, que en este caso representa la opacidad. Podemos darle valores de entre 0 a 1, donde 0 es totalmente transparente y 1 es totalmente opaco. Muchos alumnos se sorprenden con la facilidad que se puede lograr este efecto.

Veamos el script para este canvas:


//Codigo by css3html5.com.ar
var contexto = document.getElementById('lienzo').getContext("2d");
contexto.fillStyle = "rgba(180,155,125,0.4)";
contexto.fillRect(50,50,250,250);
//Codigo by css3html5.com.ar

Vale aclarar que ese código debe estar contenido en un código de JavaScript. En este caso  'lienzo' es la id del elemento canvas al que estamos afectando. El resultado será un cuadrado de 250px de lado y con una opacidad del 0,4 en el emento, cuyo color está dado por los valores de rojo, verde y azul pasados en el fillStyle.

Otra manera de trabajar con transparencias en HTML5 Canvas es hacerlo mediante el atributo globalAlpha, que nos permitirá realizar diferentes tipos de composiciones entre las formas que se encuentran dentro del Canvas. Un muy buen ejemplo de esta funcionalidad lo encontramos en el el artículo A canvas globalAlpha example, de developer.mozilla.org.

¿Te ha gustado? ¿Quieres saber más? ¡Deja tu comentario o tus dudas!

Autor: Damián

Escribió cuatro libros, relacionados con sistemas operativos, hardware y desarrollo web, entre ellos se destaca Webmaster Profesional (editado en el año 2009) y HTML 5 – Entienda el cambio, aproveche su potencial lanzado en el 2011 en formato papel y en el 2012 en versión ebook. Se ha desempeñado como editor de libros relacionados con informática. Ha realizado trabajos de edición en la revista Users Digital Design, para la cual participa también escribiendo notas sobre diseño y desarrollo web. Ha colaborado como autor en la revista Dr. Max, Phone Users y en diversas colecciones de fascículos (Universo PC y 1000 Ideas PC, entre otras). Escribe contenidos para diversos medios online, incluyendo el sitio RedUSERS.com. Es consultor y especialista en desarrollo web, con amplio conocimiento en HTML, CSS, AJAX, PHP y Bases de datos. En la actualidad se destaca su trabajo en la preparación de contenidos relacionados con CSS3 y HTML5. Es profesor y dicta curso de HTML5 y clases en la Carrera de Programador Web en el Instituto IT Master Professional Training, en Buenos Aires (Argentina).

4 Comentarios

  1. El Canvas es uno de los temas que mas me interesan de HTML5. Gracias por tu aporte, me ha resultado muy util para mi nuevo proyecto.

  2. Muchas gracias por tu comentarios, espero que sigas participando y leyendo nuestros artículos.

    Saludos.

  3. Pingback: 10 cosas que deberías saber sobre el elemento Canvas de HTML5 | Damián De Luca

  4. Pingback: 10 cosas que deberías saber sobre el elemento Canvas de HTML5

Deja un comentario

Es requirido que se compelte.*.