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: 149

Visitas el mes pasado: 193

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

Gradientes de color.

imagen canvas

Gradiente lineal de color.

Hasta ahora los dibujos que hemos hecho con canvas tienen un color plano, es decir igual en todo el dibujo. Esto podemos cambiarlo mediante los gradientes de color, llamados también degradados. Vamos a ver aquí el gradiente lineal de color.

Lo primero que haremos será marcar los puntos de inicio y final del gradiente, esto lo hacemos mediante el método createLinearGradient:

grad1=cxt.createLinearGradient(x1,y1,x2,y2);

Los dos primeros parámetros que le pasamos son las coordenadas X horizontal y Y vertical del punto de inicio; los parámetros tercero y cuarto son las coordenadas X e Y del punto final.

El resultado lo guardamos en una variable (grad1), a la cual le aplicaremos otro método para poder definir los colores de la gradiente. Definimos así el color del punto inicial con el método addColorStop().

grad1.addColorStop(0,"#ffffff");

Fíjate que el método se lo aplicamos al resultado del anterior (grad1.) y no al contexto. El primer parámetro marca un punto que puede ir desde el punto inicial al punto final. Su valor es un número entre el 0 y el 1, siendo el 0 el punto inicial y el 1 el punto final, podemos poner valores decimales intermedios que representan los puntos intermedios entre el inicial y el final. El segundo parámetro es el color que tendrá el dibujo en ese punto. En el ejemplo anterior hemos definido un punto inicial.

Para definir el color del punto final o de algún punto intermedio utilizamos de nuevo el método addColorStop() pero cambiando los parámetros que indican el punto y el color. Definimos ahora el color en el punto final:

grad1.addColorStop(1,"#000000");

El resultado es que la variable grad1 donde guardamos el gradiente, es tratada como si fuera un color más, por lo que lo incorporamos como valor en la propiedad fillStyle:

cxt.fillStyle=grad1;

Observa que al ser una variable grad1 no lo debemos poner entre comillas. Ya sólo nos queda dibujar la figura a la cual se le aplicará el color. Veamoslo en un ejemplo. Empezamos por el código HTML del canvas.

<canvas id="ejemplo1" width="220" height="150">
</canvas>

Ponemos a continuación el código javascript del canvas, recuerda que como en ejemplos de páginas anteriores debemos escribir antes la función iniciaCanvas() explicada en la página 2 de este manual. También debemos hacer que el cógigo de canvas se cargue después de la página, por lo que ponemos dentro de la función window.onload=function().

window.onload=function() {
cxt1=iniciaCanvas("ejemplo1");
if (cxt1) {
cxt1.beginPath(); //iniciar ruta
grad1=cxt1.createLinearGradient(10,75,200,75); //puntos inicio y final de gradiente
grad1.addColorStop(0,"#f00"); //color en punto inicial
grad1.addColorStop(0.5,"#0f0"); //color en punto medio
grad1.addColorStop(1,"#00f"); //color en punto final
cxt1.fillStyle=grad1; //dar color
cxt1.fillRect(10,10,200,130); //rectángulo relleno.
}
}

El resultado del código anterior lo puedes ver aquí a la derecha.

Hemos puesto en este ejemplo tres colores, uno al principio, otro al final y otro intermedio, recorriendo así el espectro de colores rojo-verde-azul.

Si tenemos varias figuras en un canvas podemos poner a cada una de ellas un gradiente de color distinto. Para ello debemos definir cada una de ellas por separado en una variable distinta.


Gradiente de color radial

El tipo de gradiente de color anterior era líneal porque se desarrolla a partir de una línea. Vemos ahora otro tipo de gradiente de color, el gradiente de color radial, que se desarrolla a partir de dos puntos que generan dos circunferencias.

La forma del código es muy similar al anterior, lo único que cambia es la propiedad para crear la gradiente la cual es la siguiente:

grad1=cxt.createRadialGradient(x1,y1,R1,x2,y2,R2);

Los parámetros que usa esta propiedad son los siguientes:

Después aplicamos el método addColorStop() de igual manera que para el gradiente lineal: Punto de inicio:

grad1.addColorStop(0,"#fff");

Al igual que en el gradiente lineal, el segundo parámetro será el color; el primer parámetro es el punto en que se define. El punto de inicio tiene como primer parámetro el 0, y el punto final tiene como primer parámetro el 1:

grad1.addColorStop(1,"#000");

Podemos poner puntos intermedios con colores distintos, definiendo como primer parámetro decimales entre el 0 y el 1.

Definimos la propiedad fillStyle con el gradiente de color que hemos obtenido:

cxt.fillStyle=grad1;

Ya no nos queda mas que dibujar la figura a la que se le quiere aplicar el gradiente de color.

Veamos un ejemplo con varias figuras a las que les aplicamos distintos gradientes radiales. Empezamos por el código HTML del canvas:

<canvas id="ejemplo2" width="220" height="220">
</canvas>

El código javascript del canvas será el siguiente, como en el ejemplo anterior debemos haber escrito antes la función iniciaCanvas() y escribir el código dentro de la función window.onload=function().

cxt2=iniciaCanvas("ejemplo2");
if (cxt2) {
cxt2.beginPath() //figura 1: rectángulo
grad2=cxt2.createRadialGradient(220,40,60,-100,40,70); //gradiente1
grad2.addColorStop(0,"#00f"); //color punto inicial
grad2.addColorStop(0.5,"#0f0"); //color punto medio
grad2.addColorStop(1,"#f00"); //color punto final
cxt2.fillStyle=grad2; //estilo de color=gradiente
cxt2.fillRect(10,10,200,90); //dibujo rectángulo

cxt2.beginPath() //figura2: círculo
grad3=cxt2.createRadialGradient(60,160,5,60,160,60); //gradiente2
grad3.addColorStop(0,"#f00"); //colores para gradiente 2
grad3.addColorStop(0.5,"#0f0");
grad3.addColorStop(1,"#00f");
cxt2.fillStyle=grad3; // color=gradiente
cxt2.arc(60,160,50,0,2*Math.PI); //dibujo círculo
cxt2.fill();

cxt2.beginPath(); //figura 3: cuadrado
grad4=cxt2.createRadialGradient(150,150,60,180,180,5); //gradiente3
grad4.addColorStop(1,"#f00"); //colores para gradiente 3
grad4.addColorStop(0.5,"#0f0");
grad4.addColorStop(0,"#00f");
cxt2.fillStyle=grad4; //color=gradiente
cxt2.fillRect(120,120,90,90); //dibujar cuadrado
}

El resultado del código anterior es el canvas que tenemos aquí a la derecha.

En los diferentes dibujos que hemos hecho aquí los resultados del gradiente son distintos dependiendo de la distancia entre los puntos de origen y el radio de cada uno de esos puntos.

Por ejemplo en el círculo hemos puesto en el mismo punto el inicio y el final, esto da como resultado un gradiente en círculos concéntricos. En el cuadrado, el punto de inicio y de final, están cerca uno del otro, con lo que la imagen cambia ligeramente, mientras que en el rectángulo superior el inicio y el final están alejados entre si.






En la siguiente página veremos más propiedades para los dibujos con canvas:

Sombras y transparencias.



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