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 (sombras)





Para administrar las sombras de una figura disponemos una serie de propiedades que debemos inicializar previo a graficar.


Para indicar con respecto a x como se desplaza la sombra debemos inicializar la propiedad shadowOffsetX (un valor positivo indica que la sombra se verá del lado derecho de la figura, un valor negativo hace que aparezca a la izquierda la sombra):



shadowOffsetX

Para indicar con respecto a y como se desplaza la sombra debemos inicializar la propiedad shadowOffsetY (un valor positivo indica que la sombra se verá en la parte inferior de la figura, un valor negativo hace que aparezca a en la parte superior la sombra):



shadowOffsetY

El color de la sombra la fijamos inicializando la propiedad:



shadowColor

Por último el difuminado de la sombra la fijamos mediante la propiedad:



shadowBlur

Un valor nulo en shadowBlur hace que no haya difuminado, luego valores positivos mayores aumentan el difuminado de la sombra.


El siguiente ejemplo muestra dos rectángulos con sombra:



<!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.shadowOffsetX=-10;
lienzo.shadowOffsetY=5;
lienzo.shadowBlur=10;
lienzo.shadowColor="rgba(0, 0, 255, 0.5)";
lienzo.fillStyle="rgb(0,0,255)";
lienzo.fillRect(20,20,150,100);
lienzo.shadowOffsetX=5;
lienzo.fillRect(250,20,100,100);
}
}

</script>

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

Indicamos que la sombra aparezca del lado izquierdo:



lienzo.shadowOffsetX=-10;

Indicamos que la sombra aparezca en la parte inferior:



lienzo.shadowOffsetY=5;

Definimos el difuminado de la sombra:



lienzo.shadowBlur=10;

Definimos el color de la sombra y su transparencia:



lienzo.shadowColor="rgba(0, 0, 255, 0.5)";

Inicializamos el color de la figura:



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

Dibujamos el primer rectángulo:



lienzo.fillRect(20,20,150,100);

Cambiamos la orientación en x de la sombra:



lienzo.shadowOffsetX=5;

Dibujamos un cuadrado:



lienzo.fillRect(250,20,100,100);









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

  • Medallas
  • 0
    Favoritos
  • 9736
    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