Webmaster Workers utiliza cookies. Lea nuestra Política de Privacidad para obtener más información. Para eliminar este mensaje, haga clic en el siguiente botón: Acepto el uso de cookies


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);








Opciones
Estadísticas
Creado 01.01.1970 a las 00:00 hs
Categoría HTML 5

  • Medallas
  • 0
    Favoritos
  • 9591
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Autor del post
Ver perfil de Administrador Administrador
Hombre Administrador  Mensaje
43 1,352 1
Medallas
No tiene medallas
Tags
Posts relacionados