html5: abril 2013

jueves, 11 de abril de 2013

19 - CANVAS (patrones de imagenes)

Cuando se pinta el interior de una figura hemos visto que podemos utilizar como relleno un color fijo, un gradiente, ahora veremos como podemos utilizar una imagen.

Para utilizar como relleno una imagen debemos crear un objeto de tipo CanvasPattern empleando el método createPattern:

CanvasPattern createPattern(Object Image, string repetición)

Es decir que pasamos como parámetro un objeto de tipo Image y un string que puede tomar alguno de estos valores:

"repeat" Se repite la imagen en x y en y completando toda la figura.

"no-repeat" Si la figura es mayor a la imagen luego queda vacío parte de la imagen.

"repeat-x" Se repite en x

"repeat-y" Se repite en y

Crearemos un ejemplo donde graficaremos un cuadrado de 600*600 píxeles y pintaremos su interior utilizando una imagen:

<!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) {

    img1 = new Image();

    img1.src = 'foto1.jpg';

    img1.onload = function(){

      var patron = lienzo.createPattern(img1,'repeat');

      lienzo.fillStyle = patron;

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

</script>

</head>

<body onLoad="dibujar()">

<canvas id="lienzo1" width="600" height="600">

Su navegador no permite utilizar canvas.

</canvas>

</body>

</html>

Creamos un objeto de tipo Image e inicializamos la propiedad src con la imagen propiamente dicha:

  if (lienzo) {

    img1 = new Image();

    img1.src = 'foto1.jpg';

Cuando se termina de cargar por completo la imagen procedemos a crear el patrón y dibujar el rectángulo inicializando la propiedad fillStyle con el patrón creado:

    img1.onload = function(){

      var patron = lienzo.createPattern(img1,'repeat');

      lienzo.fillStyle = patron;

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

PROBLEMA PROPUESTO

Dibujar un triángulo y utilizar un patrón de tipo imagen para pintar su interior.

18 - CANVAS (gradiente radial)

El método createRadialGradient crea una gradiente radial. La gradiente radial se crea con dos pares de coordenadas (x1,y1) a (x2,y2). Luego se especifica el radio de inicio y el radio final.

lienzo.createRadialGradient(comienzo x,comienzo y, radio de comienzo,x final,

y final radio final)

Graficaremos un círculo con gradiente radial:

<!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.createRadialGradient(200,200,0,200,200,200);

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

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

    lienzo.fillStyle=gradiente1;

    lienzo.arc(200,200,100,0,Math.PI*2,true);

    lienzo.fill();

</script>

</head>

<body onLoad="dibujar()">

<canvas id="lienzo1" width="600" height="600">

Su navegador no permite utilizar canvas.

</canvas>

</body>

</html>

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

PROBLEMA PROPUESTO

Dibujar un círculo y definir una gradiente lineal.

jueves, 4 de abril de 2013

16 - CANVAS (sombras)

Para administrar las sombras de una figura disponemos una serie de propiedades que debemos inicializar previo a graficar.

Para indicar con respecto a x como se desplaza la sombra debemos inicializar la propiedad shadowOffsetX (un valor positivo indica que la sombra se verá del lado derecho de la figura, un valor negativo hace que aparezca a la izquierda la sombra):

shadowOffsetX

Para indicar con respecto a y como se desplaza la sombra debemos inicializar la propiedad shadowOffsetY (un valor positivo indica que la sombra se verá en la parte inferior de la figura, un valor negativo hace que aparezca a en la parte superior la sombra):

shadowOffsetY

El color de la sombra la fijamos inicializando la propiedad:

shadowColor

Por último el difuminado de la sombra la fijamos mediante la propiedad:

shadowBlur

Un valor nulo en shadowBlur hace que no haya difuminado, luego valores positivos mayores aumentan el difuminado de la sombra.

El siguiente ejemplo muestra dos rectángulos con sombra:

<!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) {

    lienzo.shadowOffsetX=-10;

    lienzo.shadowOffsetY=5;

    lienzo.shadowBlur=10;

    lienzo.shadowColor="rgba(0, 0, 255, 0.5)";

    lienzo.fillStyle="rgb(0,0,255)";

    lienzo.fillRect(20,20,150,100);

    lienzo.shadowOffsetX=5;

    lienzo.fillRect(250,20,100,100);

</script>

</head>

<body onLoad="dibujar()">

<canvas id="lienzo1" width="600" height="300">

Su navegador no permite utilizar canvas.

</canvas>

</body>

</html>

Indicamos que la sombra aparezca del lado izquierdo:

    lienzo.shadowOffsetX=-10;

Indicamos que la sombra aparezca en la parte inferior:

    lienzo.shadowOffsetY=5;

Definimos el difuminado de la sombra:

    lienzo.shadowBlur=10;

Definimos el color de la sombra y su transparencia:

    lienzo.shadowColor="rgba(0, 0, 255, 0.5)";

Inicializamos el color de la figura:

    lienzo.fillStyle="rgb(0,0,255)";

Dibujamos el primer rectángulo:

    lienzo.fillRect(20,20,150,100);

Cambiamos la orientación en x de la sombra:

    lienzo.shadowOffsetX=5;

Dibujamos un cuadrado:

    lienzo.fillRect(250,20,100,100);

PROBLEMA PROPUESTO

Mostrar un cuadrado y definir una sombra que aumente su difuminado lentamente hasta el valor 100.

15 - CANVAS (transparencias)

Para activar transparencias cuando inicializamos la propiedad fillStyle debemos pasar a la función rgba los valores para el rojo,verde,azul y el grado de transparencia (este valore es un número que puede variar entre 0 y 1)

Si pasamos el valor 1 no la figura es totalmente opaca, es decir no se ve absolutamente nada de lo que se encuentra detrás de la misma. A medida que disminuimos dicho valor 0.7, 0.5, 0.3 etc. la figura se torna más transparente.

Con un ejemplo veremos como activar la transparencia:

<!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) {

    lienzo.fillStyle="rgb(255,0,0)";

    lienzo.fillRect(10,10,50,50);

    lienzo.fillStyle="rgba(0,255,0,0.3)";

    lienzo.fillRect(40,40,50,50);

</script>

</head>

<body onLoad="dibujar()">

<canvas id="lienzo1" width="600" height="600">

Su navegador no permite utilizar canvas.

</canvas>

</body>

</html>

Activamos el color rojo:

    lienzo.fillStyle="rgb(255,0,0)";

Dibujamos un cuadrado.

    lienzo.fillRect(10,10,50,50);

Activamos el color verde y definimos un nivel de transparencia de 0.3:

    lienzo.fillStyle="rgba(0,255,0,0.3)";

Dibujamos el cuadrado superpuesto al primero:

    lienzo.fillRect(40,40,50,50);

PROBLEMA PROPUESTO

Dibujar 250 cuadrados del rojo al negro. Dibujar un rectángulo negro grande que tape todos los cuadrados. Redibujar y hacer que el rectángulo se vuelva cada vez más transparente.