Cómo crear un degradado (HTML)

Artículo
03/04/2016

[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]

Las formas y las líneas no están limitadas a los colores sólidos. Un degradado usado en un Canvas en realidad un tipo de valor de color, así que puedes aplicarlo a las propiedades fillStyle y strokeStyle.

Los degradados se pueden usar para producir un cambio direccional en intensidad o color en una imagen. Esto resulta útil para generar imágenes de fondo, indicar la altitud en los mapas o en cualquier lugar donde quiera agregar iluminación y sombreado a una superficie.

Los degradados son útiles para agilizar tus aplicaciones web ya que puedes evitar tener que usar imágenes para estos efectos y minimizar el ancho de banda y el tiempo que se tarda en cargarlas. Y como se generan mediante programación, se pueden escalar y reutilizar con facilidad.

Requisitos previos

En este tema, se supone que puedes crear una aplicación de la Tienda Windows básica con JavaScript que use la plantilla de la Biblioteca de Windows para JavaScript. Para obtener instrucciones sobre cómo crear tu primera aplicación de la Tienda Windows con JavaScript, consulta el tema acerca de cómo crear tu primera aplicación web. Para obtener instrucciones sobre el uso de la plantilla de WinJS, consulta el tema sobre cómo obtener y usar el kit de herramientas de WinJS.

Instrucciones

Paso 1: Obtener el contexto de representación

Antes de que podamos dibujar una imagen en nuestro Canvas y colorearla con un degradado, tenemos que obtener el contexto de representación del elemento Canvas. El contexto de representación es el lugar en el que se definen todos los métodos y propiedades de dibujo.

Para mejorar el rendimiento de la aplicación de la Tienda Windows con JavaScript, espera a que se haya cargado la página HTML antes de ejecutar el código JavaScript. Para ello, coloca el código que dibujará la imagen en una función a la que se llamará después de cargar la página.
```
window.onload = drawGradient;   

function drawGradient() {...
```
Usa getElementById para recuperar el nodo DOM (Document Object Model) del Canvas y después usa el método getContext para acceder al contexto de representación.

Hay diferentes tipos de contextos de representación que permiten dibujar de maneras distintas. Por ejemplo, hay un contexto en 2D para gráficos en 2D y un contexto en 3D para gráficos en 3D. En los ejemplos de este tema se usa un contexto de representación en 2D.
```
    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
```

Paso 2: Crear el degradado

Ahora que tenemos el contexto de representación podemos definir el degradado. Hay dos tipos de degradados: el lineal, o degradado recto, y el radial, o circular.

Linear gradient

El método de degradado lineal usa cuatro argumentos:

createLinearGradient(startX, startY, endX, endY)

El primer conjunto de dos argumentos son la posición x e y del inicio del degradado, y el segundo conjunto de argumentos son la posición x e y del final del degradado.

Degradado lineal vertical

En este ejemplo se asigna el método createLinearGradient a la variable myGradient. Esto será útil para el siguiente paso cuando agreguemos colores al degradado.
```
var myGradient=context.createLinearGradient(0, 0, 200, 0);
```
Para crear un degradado lineal vertical, en el que el degradado sombrea de un lado a otro, las posiciones x e y iniciales del degradado se establecen en 0 y 0, y las posiciones x e y finales en 200 y 0. Como los valores y (los parámetros 2 y 4) son ambos iguales a 0, el degradado sombrea de forma uniforme de izquierda a derecha.
Un degradado horizontal

Para crear un degradado que sombree de arriba hacia abajo, hay que conservar los valores de la x (parámetros 1 y 3) constantes, y hacer que los valores de la y (parámetros 2 y 4) vayan desde 0 hasta la altura del Canvas.
```
var myGradient=context.createLinearGradient(0, 0, 0, 100);
```
Un degradado diagonal

También puedes crear degradados a lo largo de una diagonal. En este ejemplo varían los valores tanto de x como de y, establecidos en 200 y 100, respectivamente.
```
var myGradient=context.createLinearGradient(0, 0, 200, 100);
```

Radial gradient

El método createRadialGradient usa seis argumentos:

createRadialGradient(startX, startY, startRadius, endX, endY, endRadius)

Donde los parámetros son:

startX y startY con las coordenadas x e y en el Canvas para el círculo inicial.
startRadius es el radio del círculo inicial.
endX y endY son las coordenadas x e y en el Canvas para el círculo final.
endRadius es el radio del círculo final.

Un degradado radial tradicional

Para crear un degradado radial "traditional", donde el color se atenúa de forma uniforme desde un círculo al otro, debes establecer las coordenadas x/y de ambos círculos en el mismo valor, y asegurarte de que uno de los círculos de degradado sea mayor que el otro.
```
var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);
```
Ubicaciones de inicio y fin distintas

En el ejemplo de degradado radial anterior, las coordenadas x/y son las mismas para la ubicación inicial y final, establecidas en 52 y 50, respectivamente y solo existe un aumento en el tamaño del radio de cada círculo, de 10 a 200. Esto centra el sombreado del degradado radial en el centro del círculo.

Si apartas la ubicación inicial de la final, lo que conseguirás será un degradado con forma de cono estirado a lo largo del Canvas.
```
var myGradient = context.createRadialGradient(32, 30, 5, 60, 60, 50);
```
En este ejemplo, las coordenadas x/y del círculo inicial son 32 y 30, y tiene un radio de 5. Y las coordenadas x/y del círculo final son 60 y 60, y con un radio de 50. Este es el resultado:

Paso 3: Establecer las paradas de color

Un degradado tiene dos o más métodos addColorStop:

addColorStop(offset, color)

Para agregar una parada de color, debes especificar el color que se va a aplicar y su posición de desplazamiento a lo largo del degradado. Las posiciones de degradado pueden estar en cualquier punto entre 0, al principio del degradado, hasta 1, al final del degradado.

En nuestro ejemplo, se usa la variable myGradient para establecer el valor de addColorStop de 0 a 1 de forma que el degradado sombree de forma uniforme del blanco al negro.

myGradient.addColorStop(0,"white");
myGradient.addColorStop(1,"black");

Varias paradas de color

Si quieres puedes usar varias paradas de color. En este ejemplo, un segundo addColorStop asigna una parada de color a mitad de camino del degradado:
```
  myGradient.addColorStop(0,"orange");
  myGradient.addColorStop(.5, "green");
  myGradient.addColorStop(1, "blue");
```
El degradado resultante será este:

Paso 4: Establecer el estilo de relleno

Antes de dibujar el degradado, se debe establecer fillStyle a myGradient.

context.fillStyle = myGradient;

Finalmente se usa el método fillRect para dibujar la imagen:

context.fillRect(0, 0, 200, 100);

Ejemplos completos

Degradado lineal

Este código JavaScript usa un elemento Canvas para dibujar un rectángulo y, a continuación, usa un degradado lineal diagonal para el relleno de estilo, fillStyle, del rectángulo.

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");

    // Create a linear gradient.
    var myGradient=context.createLinearGradient(0, 0, 300, 100);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.
    context.fillStyle = myGradient;

    // Draw the rectangle.
    context.fillRect(0, 0, 200, 100);
}

Degradado radial

Este código JavaScript usa un elemento Canvas para dibujar un círculo y, a continuación, usa un degradado radial para el relleno de estilo, fillStyle, del círculo.

window.onload = drawGradient;   

function drawGradient() {

    // Get the canvas element and specify a 2d drawing context.
    var context = document.getElementById("canvas").getContext("2d");
  
    // Create the radial gradient.
    var myGradient = context.createRadialGradient(52, 50, 10, 52, 50, 200);

    // Set the color stops.
    myGradient.addColorStop(0, "white");
    myGradient.addColorStop(1, "black");

    // Set the fill style to the gradient.     
    context.fillStyle = myGradient;

    // Draw a circle.
    context.beginPath();
    context.arc(52, 50, 40, 0, Math.PI*2, true); 
    context.closePath();
    context.fill();
}

Hojas de estilo CSS

Este es un ejemplo de unas hojas de estilos en cascada (CSS) que crea un borde gris alrededor de un elemento Canvas.

/* Style the canvas element with a grey border. */
canvas { border: 1px solid #c3c3c3; }

Archivo HTML

Este archivo HTML crea un elemento Canvas y usa archivos JavaScript y CSS externos.

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="myJavascript.js"></script>
        <link Rel="stylesheet" Href="myStyle.css" Type="text/css">
    </head>
    <body>
        <canvas id="canvas" width="200" height="100" />
    </body>
</html>

Temas relacionados

Inicio rápido: Dibujar en un Canvas

Optimización del rendimiento: código JavaScript

Compartir a través de