CANVAS (gradiente lineal)

Hasta ahora hemos visto que una figura la podemos llenar con un color liso. Las gradientes nos permite llenar una figura con dos o más colores.

Nosotros indicamos por ejemplo dos colores y luego las librerías disponibles nos generan todos los colores intermedios entre los colores indicados.

Veremos primero la gradiente lineal. Los métodos necesarios para implementar una gradiente lineal son:

[objeto de tipo CanvasGradient]=lienzo.createLinearGradient(x1,y1,x2,y2);

Los cuatro parámetros indican dos puntos del canvas, luego en dichas coordenadas graficaremos la figura.

Seguidamente debemos llamar al método:

    [objeto de tipo Gradient].addColorStop([valor entre 0 y 1],color);

Con un ejemplo quedará claro:

   var gradiente1=lienzo.createLinearGradient(0,0,200,0);
    gradiente1.addColorStop(0,"rgb(255,0,0)");
    gradiente1.addColorStop(1,"rgb(0,0,0)");
    lienzo.fillStyle=gradiente1;
    lienzo.fillRect(0,0,200,200);

Creamos un objeto de la clase CanvasGradient pasando dos puntos del Canvas:

   var gradiente1=lienzo.createLinearGradient(0,0,200,0);

Definimos color inicial(como el primer parámetro es cero luego es el punto inicial):

    gradiente1.addColorStop(0,"rgb(255,0,0)");

Definimos el color del punto final:

    gradiente1.addColorStop(1,"rgb(0,0,0)");

Inicializamos la propiedad fillStyle del lienzo con el objeto de tipo CanvasGradient (acá es donde antes asignamos un color):

    lienzo.fillStyle=gradiente1;

Por último dibujamos el cuadrado:

    lienzo.fillRect(0,0,200,200);

Luego al verlo en ejecución veremos que el cuadrado comienza con color rojo en el lado de la izquierda y luego va variando al negro.

El siguiente ejemplo dibuja cuatro cuadrados con distintas variantes de gradientes lineales:

<!DOCTYPE HTML>
<html>
<head>

<script type="text/javascript">
function retornarLienzo(x) {
  var canvas = document.getElementById(x);
  if (canvas.getContext) {
    var lienzo = canvas.getContext("2d");   
    return lienzo;
  } else
    return false;
}

function dibujar() {
  var lienzo=retornarLienzo("lienzo1");
  if (lienzo) {
    var gradiente1=lienzo.createLinearGradient(0,0,200,0);
    gradiente1.addColorStop(0,"rgb(255,0,0)");
    gradiente1.addColorStop(1,"rgb(0,0,0)");
    lienzo.fillStyle=gradiente1;
    lienzo.fillRect(0,0,200,200);
    
    var gradiente2=lienzo.createLinearGradient(200,300,0,300);
    gradiente2.addColorStop(0,"rgb(255,0,0)");
    gradiente2.addColorStop(1,"rgb(0,0,0)");
    lienzo.fillStyle=gradiente2;
    lienzo.fillRect(0,300,200,200);
    
    var gradiente3=lienzo.createLinearGradient(300,0,500,200);
    gradiente3.addColorStop(0,"rgb(255,0,0)");
    gradiente3.addColorStop(1,"rgb(0,0,0");
    lienzo.fillStyle=gradiente3;
    lienzo.fillRect(300,0,200,200);
    
    var gradiente4=lienzo.createLinearGradient(300,300,500,500);
    gradiente4.addColorStop(0,"rgb(255,0,0)");
    gradiente4.addColorStop(0.5,"rgb(0,0,0)");
    gradiente4.addColorStop(1,"rgb(255,0,0)");
    lienzo.fillStyle=gradiente4;
    lienzo.fillRect(300,300,200,200);
  }
}

</script>

</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

Para pintar un cuadrado y que el gradiente se desplace en forma diagonal debemos pasar como parámetros al método createLinearGradient las coordenadas de dos vértices opuestos del cuadrado:

    var gradiente4=lienzo.createLinearGradient(300,300,500,500);

Y si además queremos que comience en rojo, luego avance hasta el negro y finalmente regrese al rojo debemos llamar al método addColorStop con los siguientes parámetros:

    gradiente4.addColorStop(0,"rgb(255,0,0)");
    gradiente4.addColorStop(0.5,"rgb(0,0,0)");
    gradiente4.addColorStop(1,"rgb(255,0,0)");

Finalmente solo nos falta inicializar la propiedad fillStyle y llamar al método fillRect:

    lienzo.fillStyle=gradiente4;
    lienzo.fillRect(300,300,200,200);

Temario del Tutorial->17 - CANVAS (gradiente lineal)

Retornar