Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


CANVAS (transparencias)





Para activar transparencias cuando inicializamos la propiedad fillStyle debemos pasar a la función rgba los valores para el rojo,verde,azul y el grado de transparencia (este valore es un número que puede variar entre 0 y 1)


Si pasamos el valor 1 no la figura es totalmente opaca, es decir no se ve absolutamente nada de lo que se encuentra detrás de la misma. A medida que disminuimos dicho valor 0.7, 0.5, 0.3 etc. la figura se torna más transparente.


Con un ejemplo veremos como activar la transparencia:



<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}

function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.fillStyle="rgb(255,0,0)";
lienzo.fillRect(10,10,50,50);
lienzo.fillStyle="rgba(0,255,0,0.3)";
lienzo.fillRect(40,40,50,50);
}
}

</script>

</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>


Activamos el color rojo:



lienzo.fillStyle="rgb(255,0,0)";

Dibujamos un cuadrado.



lienzo.fillRect(10,10,50,50);

Activamos el color verde y definimos un nivel de transparencia de 0.3:



lienzo.fillStyle="rgba(0,255,0,0.3)";

Dibujamos el cuadrado superpuesto al primero:



lienzo.fillRect(40,40,50,50);








Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría HTML 5

  • Medallas
  • 0
    Favoritos
  • 9691
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados