Como vimos en los artículos anteriores, ahora vamos a ver métodos nuevos para crear un degradado de tipo lineal a nuestra etiqueta canvas en HTML5 con la ayuda de JavaScript.

Métodos para crear degradados:

  • createLinearGradient(x, y, ancho, alto) : vemos el método para crear un degradado tiene parámetros, el X significa el eje X y el parámetro Y el eje Y del canvas. el ancho y el alto varía si queremos que sea horizontal, vertical o diagonal el degradado.
  • addColorStop(número, color) : el método para agregar color al degradado, el parámetro número indica el porcentaje en este caso es de 0 a 1 (100%), y el color un valor de color que queramos.

Veamos un ejemplo de un degradado lineal en un cuadrado:

Veamos el código del ejemplo: 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Mi Titulo</title>
<meta charset="UTF-8">
<script type="text/javascript">

// obtengo referencia del canvas por su ID
var canvas = document.getElementById('miCanvas');
// creo un contexto a travez de la referencia del canvas con un metodo
var ctx = canvas.getContext("2d");

// creamos un degradado con este metodo
var drg = ctx.createLinearGradient(0, 0, 200, 0);
// agregamos color al degradados
drg.addColorStop(0, "white");
drg.addColorStop(0.25, "green");
drg.addColorStop(0.5, "blue");
drg.addColorStop(0.75, "red");
drg.addColorStop(1, "black");

// asiganmos el color degradado al canvas
ctx.fillStyle = drg;
// creamos un rectagunlo para dibujar
ctx.fillRect(0, 0, 200, 200);

</script>
</head>
<body>
<canvas id="miCanvas" width="200" height="200" style="border: 1px solid blue">
 Tu navegador No soporta la etiqueta canvas de HTML5
</canvas>

</body>
</html>

Y asi de sencillo creamos un degradado lineal.

nota