Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Canvas básico

Crea tus propios dibujos y animaciones con Canvas en HTML5


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 111

Visitas el mes pasado: 198

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Manual de Canvas del HTML 5
Desarrollo Web
Tutorial de Canvas
mozilla.org
HTML5
htmlya
Empezando a dibujar en Canvas html 5 tutorial
taringa.net
Curva de Bézier
Wikipedia
flashcanvas
code.google.com
HTML5 Canvas tutorial
w3scool
HTML5 Canvas Element Tutorial
html5canvastutorials
The canvas element
HTML Living Standard

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




Canvas básico (IX)

Sombras y transparencias

imagen canvas

Sombras

Podemos poner sombras a las figuras hechas con canvas, para ello tenemos una serie de propiedades, las cuales veremos a continuación.

shadowOffsetX :Esta propiedad indica el desplazamiento horizontal (eje X) de la sombra en píxeles.

cxt.shadowOffsetX=n;

El valor n debe ser un número entero que indica el número de píxeles. Los valores positivos desplazan la sombra hacia la derecha y los negativos hacia la izquierda.

shadowOffsetY : Esta propiedad indica el desplazamiento vertical (eje Y) de la sombra en píxeles.

cxt.shadowOffsetY=n;

Al igual que en el método anterior, el valor n debe ser un número entero. Los valores positivos indican el desplazamiento de la sombra en píxeles hacia abajo, y los negativos la desplazan hacia arriba.

shadowColor : Esta propiedad indica el color de la sombra, el color podemos ponerlo en cualquier formato de color admitido por HTML5.

cxt.shadowColor="rgb(255,0,0)";

shadowBlur() : Esta propiedad indica el grado de difuminado de la sombra.

cxt.shadowBlur=10;

El valor debe ser un número entero igual o mayor que 0. El 0 corresponde a la falta de difuminado, cuanto más alto sea el valor mayor será la dispersión de la sombra.

El resto del código para poner una sombra es el normal para crear una figura. Veamos ahora un ejemplo con varias figuras con sombra.


Ejemplo de figuras con sombra.

Vamos a hacer un canvas con cuatro figuras que proyectan cada una de ellas una sombra distinta. Empezamos por el código HTML del canvas:

<canvas id="ejemplo1" width="200" height="200">
</canvas>

Ponemos después el código javascript, Antes tenemos que haber escrito en el código la función iniciaCanvas() descrita en la 2ª página de este manual. El código lo ponemos dentro de la función window.onload=function().

window.onload=function() {
cxt1=iniciaCanvas("ejemplo1");
if (cxt1) {
//Primeraa figura: Cuadrado
cxt1.beginPath(); //iniciar ruta
cxt1.shadowOffsetX=-10; //desplazamiento horizontal sombra.
cxt1.shadowOffsetY=-8; //desplazamiento vertical sombra
cxt1.shadowColor="#aa0"; //color de sombra
cxt1.shadowBlur=6; //dispersion de sombra.
cxt1.fillStyle="lime"; //color del objeto
cxt1.fillRect(20,20,80,80); //dibujar rectángulo.
//Segunda figura: círculo
cxt1.beginPath(); //iniciar ruta
cxt1.shadowOffsetX=-8; //desp. horizontal sombra
cxt1.shadowOffsetY=8; //desp.vertical sombra
cxt1.shadowColor="#a0a"; //color de sombra
cxt1.shadowBlur=5; //dispersión de sombra
cxt1.fillStyle="aqua"; //color del objeto
cxt1.arc(155,55,35,0,2*Math.PI); //dibujo círculo
cxt1.fill() //visualizar círculo
//Tercera figura: curva cuadrática
cxt1.beginPath();
cxt1.shadowOffsetX=10;
cxt1.shadowOffsetY=-10;
cxt1.shadowColor="#aa0";
cxt1.shadowBlur=8;
cxt1.fillStyle="fuchsia";
cxt1.moveTo(10,190)
cxt1.quadraticCurveTo(150,100,10,130);
cxt1.fill();
//cuarta figura: curva cúbica de Bezier
cxt1.beginPath();
cxt1.fillStyle="teal";
cxt1.shadowOffsetX=10;
cxt1.shadowOffsetY=10;
cxt1.shadowColor="#777";
cxt1.shadowBlur=8;
cxt1.moveTo(80,180);
cxt1.bezierCurveTo(230,210,140,180,180,100);
cxt1.fill();
}
}

El resultado del canvas anterior podemos verlo aquí a la derecha.

El proceso seguido para poner la sombra es el mismo en las cuatro figuras, es decir, iniciamos el camino con BeginPath(), ponemos después las propiedades de sombra, (no es necesario que estén en el mismo orden que aquí), indicamos después el color de la figura con fillStyle y por último dibujamos la figura y la visualizamos.


Transparencias

Podemos hacer que las figuras sean totalmente opacas o que tengan un cierto grado de transparencia, de manera que se pueda ver lo que hay detrás.

Hay dos formas de hacer que una figura tenga transparencia. La primera es hacerla con colores transparentes, y la segunda es aplicar la transparencia a la figura.


Colores transparentes.

En el manual de CSS3, página VII: Transparencias se indica la forma de definir los colores transparentes. Los colores transparentes los podemos definir en formato RGBA o HSLA. Este último formato está disponible sólo en las versiones más recientes de los navegadores, por lo que aquí utilizaremos el formato RGBA.

El formato RGBA es igual que el RGB pero al que se le añade un nuevo valor para la transparencia:

rgba(255,255,255,0.5)

Los tres primeros valores corresponden a la intensidad de los colores básicos, rojo, verde, y azul, su valor es un número entre 0 y 255. El cuarto valor es la transparencia, y es un número (que puede ser decimal) entre 0 y 1, siendo el 1 la máxima opacidad, y el 0 la transparencia total.


figuras transparentes

Podemos hacer también que la transparencia se aplique a toda la figura, de forma que si esta tiene varios colores, o es una figura más compleja, la transparencia se aplica a toda ella entera. Para ello utilizaremos la propiedad globalAlpha.

cxt.globalAlpha=0.5;

Al igual que en los colores con transparencia, el valor de esta propiedad será un número entre el 0 y el 1, donde 1 es la máxima opacidad, y el 0 la máxima transparencia.


Ejemplo con figuras semitransparentes.

Como ejemplo haremos ahora un canvas con varias figuras con transparencia. Empezamos por el código HTML:

<canvas id="ejemplo2" width="200" height="200" style="background: url(objetos/fondo4.gif);">
</canvas>

Hemos puesto una imagen de fondo al canvas para poder distinguir mejor la transparencia de las figuras. Si quieres seguir el ejemplo y no tienes esta imagen puedes poner cualquier otra.

A continuación ponemos el código javascript, como se indicó en el ejemplo anterior, debemos tener antes en el código la función iniciaCanvas explicada en la segunda página de este manual, y debemos poner el código del canvas dentro de la función window.onload=function().

cxt2=iniciaCanvas("ejemplo2");
if (cxt2) {
//primera figura: cuadrado
cxt2.beginPath(); //iniciar ruta
cxt2.fillStyle="rgb(255,0,0)"; //color relleno 
cxt2.strokeStyle="rgb(0,255,255)"; //color contorno 
cxt2.lineWidth=10; //grosor de contorno
cxt2.globalAlpha=0.7; //Transparencia 0.7
cxt2.strokeRect(10,10,90,90); //dibujar contorno cuadrado
cxt2.fillRect(10,10,90,90); //dibujar relleno cuadrado
//segunda figura: círculo
cxt2.beginPath(); //iniciar ruta
cxt2.globalAlpha=1; //Quitamos transparencia: valor 1
cxt2.fillStyle="rgba(0,255,0,0.5)"; //color relleno semitransparente
cxt2.strokeStyle="rgb(255,0,255)"; //color contorno
cxt2.arc(100,100,50,0,2*Math.PI); //dibujar círculo
cxt2.stroke(); //visualizar contorno
cxt2.fill(); //visualizar relleno
//Tercera figura: curva de Bezier
cxt2.beginPath() //iniciar ruta
cxt2.fillStyle="rgb(0,0,255)"; //color de relleno
cxt2.strokeStyle="rgb(255,255,0)"; //color de contorno
cxt2.globalAlpha=0.4; //Transparencia 0.4
cxt2.moveTo(100,190); //punto inicial
cxt2.bezierCurveTo(0,120,180,50,190,190); //curva de Bezier
cxt2.closePath(); //cerrar figura
cxt2.stroke(); //visualizar contorno
cxt2.fill(); //visualizar relleno
}

el resultado del código anterior podemos verlo aquí a la derecha.

Hemos aplicado distintas transparencias a las distintas figuras. observa como la transparencia, cuando se le aplica a la figura (propiedad globalAlpha), hace transparente tanto al relleno como al contorno. Al círculo sólo hemos aplicado la transparencia al color de fondo (mediante color rgba), dejando el contorno totalmente opaco.






En la siguiente página veremos cómo incorporar texto en un canvas.

Textos



Canvas (básico)

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com