El canvas de HTML 5 (VII). Gradientes radiales.

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

En el artículo anterior aprendimos a crear gradientes lineales. Vamos ahora a ver cómo crear gradientes radiales, desde un centro de un color a un perímetro de otro color, bien directamente, o con colores intermedios.

Si al principio nos costó un poco aprender a crear gradientes lineales, con los radiales la cosa se complica un poco. No obstante, con la práctica seremos capaces de crear los gradientes que necesitemos, según nuestro diseño. No te asustes si, al principio, no ves claro lo que estás haciendo, o te sale un resultado que no se parece en nada a lo que habías pensado. Nos ha sucedido a todos. En cuanto le cojas el truquillo, en seguida estarás diseñando interesantes combinaciones.

CREAR GRADIENTES RADIALES

Crear y emplear gradientes radiales es muy similar a la creación y uso de gradientes lineales. La diferencia es que, en lugar del método createLinearGradient() empleamos createRadialGradient(). Este método se basa en definir dos círculos, uno dentro de otro más amplio. Recibe seis parámetros:

  • Coordenadas X e Y del centro del primer círculo.
  • Radio del primer círculo.
  • Coordenadas X e Y del centro del segundo círculo.
  • Radio del segundo círculo.

Todas las medidas son en píxeles. Ten en cuenta una cosa importante. Las coodenadas de los centros de los círculos se establecen con respecto al punto 0, 0 del canvas (es decir, la esquina superior izquierda de dicho canvas). Si la figura que vas a rellenar no está en esas coordenadas, el relleno no se centrará en la figura.

Por lo demás, la operativa es la misma. Después de crear el gradiente, hay que definir los puntos de color con el método addColorStop(), que funciona del mismo modo que ya conocemos. Sin embargo, en los gradientes radiales, el efecto visual es mucho más destacado, por lo que una pequeña variación en el primer parámetro produce un cambio llamativo en el resultado final.

Como siempre, mejor ver un ejemplo. En este caso, se llama canvas_011.htm. Dadas las similitudes programáticas con el uso de gradientes lineales, no lo vamos a reproducir aquí. Puedes descargártelo, junto con el ejemplo que veremos luego, en este enlace. El resultado es el que ves a continuación:

GRADIENTES EN TRAZOS

Al final del artículo anterior apuntábamos a que los gradientes se pueden aplicar también sobre trazos, no sólo sobre rellenos. Esto nos permite jugar con ciertos efectos a la hora de crear, por ejemplo, un texto artístico.

Con el ejemplo canvas_012.htm, que también está en el paquete que te has descargado más arriba, obtienes el resultado que ves a la derecha.

Y, de momento, ya vale de gradientes.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *