Transparencia en HTML5 Canvas

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:

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

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 documento CanvasRenderingContext2D.globalAlpha de MDN Web Docs.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

2 Comentarios en “Transparencia en HTML5 Canvas
  1. Rolando dice:

    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.

2 Pings/Trackbacks para "Transparencia en HTML5 Canvas"
  1. […] el Canvas se puede trabajar con transparencias mediante colores mediante globalAlpha. También podremos aprovechar lo que nos ofrece […]

  2. […] el Canvas se puede trabajar con transparencias mediante colores mediante globalAlpha. También podremos aprovechar lo que nos ofrece […]

Deja un comentario

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

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.