Chuck's Academy

HTML5 Canvas

Manejo de Colores, Trazos y Rellenos

En este capítulo, aprenderemos a trabajar con colores, estilos de trazo y rellenos en el canvas. Estos aspectos nos permitirán personalizar el diseño y apariencia de los gráficos en nuestro juego, dándole un toque visual único.

Aplicando Colores en el Canvas

Para establecer el color de relleno de una forma, usamos la propiedad fillStyle del contexto 2D. fillStyle acepta cualquier valor de color válido en CSS, como nombres de color, valores hexadecimales o el formato rgba para añadir transparencia.

javascript
"En este ejemplo, usamos la propiedad fillStyle del contexto para definir el color naranja, y luego dibujamos un rectángulo relleno en las coordenadas veinte, veinte, con un ancho y alto de cien píxeles."

Puede experimentar cambiando el valor de fillStyle para explorar diferentes colores.

Trazos: Cambiando el Color y el Ancho

Además del color de relleno, podemos personalizar el color y el estilo del trazo de una forma usando la propiedad strokeStyle. También podemos modificar el grosor del trazo con lineWidth.

javascript
"Aquí, utilizamos strokeStyle para establecer el color del trazo a azul y definimos el grosor de la línea en cuatro píxeles usando lineWidth. Esto crea un rectángulo sin relleno, con un borde azul grueso de cuatro píxeles."

Rellenos y Transparencia con rgba

La función rgba permite añadir transparencia a los colores. El último valor en rgba representa la opacidad, donde 1 es completamente opaco y 0 es completamente transparente.

javascript
"En este código, usamos el color rojo con transparencia, configurado con rgba donde el valor de opacidad es cero punto cinco. Esto genera un rectángulo rojo con un efecto semitransparente."

La transparencia es útil para crear efectos visuales sutiles, como sombras o capas.

Gradientes en Canvas

Los gradientes permiten crear transiciones de color suaves en una forma. En el canvas, existen dos tipos de gradientes: lineales y radiales. Comencemos con un gradiente lineal.

Gradientes Lineales

Para crear un gradiente lineal, utilizamos el método createLinearGradient, especificando el inicio y el final del gradiente. Luego, añadimos colores usando addColorStop.

javascript
"Primero creamos un gradiente lineal que va del color rojo al amarillo en una dirección horizontal. Luego asignamos este gradiente a fillStyle y lo usamos para rellenar un rectángulo. El resultado es un rectángulo con una transición de color suave de rojo a amarillo."

Gradientes Radiales

Los gradientes radiales crean una transición de color que emana desde un punto central hacia afuera. Este tipo de gradiente es ideal para simular efectos de iluminación o brillo.

javascript
"En este ejemplo, creamos un gradiente radial centrado en trescientos, trescientos treinta, que comienza en azul y se disuelve en blanco. Este gradiente radial se aplica a un rectángulo, generando un efecto de color que se expande desde el centro hacia los bordes."

Ejercicio: Exploración de Colores y Gradientes

Para poner en práctica lo aprendido, intenta crear varios rectángulos en tu canvas, cada uno con un color diferente. Usa al menos un color con transparencia y prueba tanto los gradientes lineales como los radiales para explorar los efectos visuales posibles.

javascript
"Primero, creamos un gradiente lineal que va de morado a rosado y lo aplicamos a un rectángulo. Luego, dibujamos otro rectángulo usando un color verde azulado con una opacidad de cero punto tres, generando un efecto de transparencia."

Conclusión

En este capítulo, hemos visto cómo aplicar colores, estilos de trazo y gradientes en el canvas, lo cual es clave para personalizar el diseño gráfico de nuestro juego. Estas técnicas mejoran la apariencia de nuestras formas y nos permiten hacer que el juego sea visualmente atractivo. En el próximo capítulo, aprenderemos a trabajar con texto en el canvas, añadiendo elementos de texto al juego y personalizándolos según nuestras necesidades. ¡Nos vemos en el siguiente capítulo!


Pregúntame lo que sea