Entendido.

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

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++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

Canvas básico (VIII)

Gradientes de color.

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:

• x1,y1 : Primer y segundo parámetro. Indican las coordenadas X horizontal e Y vertical del punto de inicio.
• R1 : Tercer parámeto. Indica el radio de influencia del primer punto.
• x2,y2 : Cuarto y quinto parámetro. Indican las coordenadas X horizontal e Y vertical del punto final.
• R2 : Sexto parámetro. Indica el radio de influencia del punto final.

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.

Página creada por ANYELGUTI.

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

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

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