Errores PHP
X
Usuario
Password
0 FPS

Tutorial HTML5 Canvas2D parte 3 (degradado lineal)

03 de Noviembre del 2011 por Josep Antoni Bover, 4834 visitas, 0 comentarios, 4 votos con una media de 3 sobre 5.
Categorías : Canvas 2D, HTML, JavaScript, Programación.
La web está en segundo plano, animación en pausa.
Cargando animación...
Tutorial HTML5 Canvas2D parte 3 (degradado lineal)

Siguiendo con los tutoriales del objeto HTML5 canvas en dos dimensiones, hoy vamos a ver cómo crear degradados.

Ya os aviso que la implementación de degradados que han creado no me ha gustado nada, y que es muy complicada además de ser poco intuitiva. Por otro lado gana bastante en versatibilidad.

Por una parte entiendo porque han implementado los degradados así, pero por otra me parece algo excesivo. De todas formas el objeto canvas aun está en fase experimental y probablemente sufrirá mas cambios antes de llegar a la primera versión final.

En fin vamos al lio, los degradados son tratados como si fueran un color mas, me explico... por ejemplo para decirle al canvas que queremos pintar un rectángulo con el fondo rojo utilizamos el atributo fillStyle y le indicamos "rgb(255, 0, 0)", y luego para pintar el rectángulo utilizamos fillRect.

Pues para pintar un rectángulo con un degradado hacemos prácticamente lo mismo, con la diferencia de que antes creamos un estilo degradado.

Veamos un ejemplo con código :

Creación del estilo degradado vertical
1
2
3
var GradientVertical = Context.createLinearGradient(0, 20, 0, 80);
GradientVertical.addColorStop(0, "blue");
GradientVertical.addColorStop(1, "green");

Para crear un estilo de degradado creamos la variable GradientVertical y utilizamos la función createLinearGradient a la cual debemos pasarle 4 parámetros. Los dos primeros parámetros representan el punto de origen (X,Y) y los dos últimos parámetros el punto de destino (X,Y).

Luego en la línea 2 y 3 añadimos los colores que queremos incluir en el degradado utilizando la función addColorStop, el primer parámetro es un valor que puede ir de 0.0 a 1.0 y el segundo valor es el color. Hay que remarcar que podemos añadir más de dos colores si lo deseamos, por ejemplo podríamos añadir el rojo en la posición 0.5.

Hasta aquí más o menos se entiende, ahora veamos cómo hay que pintar el degradado :

Pintando estilo degradado vertical
1
2
Context.fillStyle = GradientVertical;
Context.fillRect(20, 20, 80, 80);

Pues bien, como ya comente antes pintar el degradado no supone un gran problema ya que podemos pintarlo como cualquier rectángulo normal. En primer lugar asignamos el estilo del degradado utilizando el atributo fillStyle, y luego utilizamos la función fillRect para pintar el degradado dentro de un rectángulo.

Fijaros que cuando creo el estilo del degradado le doy como parámetros: origen (0,20), destino (0, 80) y el rectángulo realmente tiene 80 pixeles de ancho y altura, pero empieza en las coordenadas (20, 20).

Entonces si creamos el degradado en origen (0, 0), destino (0, 80) que es lo que pasa? pues que el degradado quedara calculado de forma que empiece al principio del objeto canvas, y no del rectángulo. Dicho de otro modo, veremos una pequeña parte azul y una gran parte de color verde.

Porque funciona esto así? bueno la razón principal es que el estilo del degradado puede utilizarse para ser pintado con cualquier función ya sea para pintar el fondo o el borde de un rectángulo, de un texto o incluso de una figura.

Por una parte ofrece más versatibilidad a la hora de utilizar degradados, pero por otra resulta bastante más engorroso su uso.

Y esto es todo por hoy, como siempre podéis ver un ejemplo online, o descargar-lo.

Ver ejemplo Descargar ejemplo