Crea tus propios dibujos y animaciones con Canvas en HTML5
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 58
Visitas el mes pasado: 137
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
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.
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:
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