jueves, 28 de febrero de 2013

11 - CANVAS (curva de bezier)



El concepto de curva de Bezier lo podemos leer en la Wikipedia.

Básicamente debemos indicar dos coordenadas fijar y luego se traza una línea que une esos dos puntos. Esta línea se ve modificada por la atracción de otros dos puntos invisibles que ubicamos a discreción. Según la ubicación de estos dos puntos podemos ver como varía la curva.

Crearemos un ejemplo donde disponemos dos puntos que se encuentran en la misma fila y luego otros dos puntos uno por encima y otro por debajo de la recta que formarían los dos puntos iniciales:

<!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.strokeStyle="rgb(255,0,0)";
    lienzo.beginPath();
    lienzo.moveTo(0,150);
    lienzo.bezierCurveTo(100,50,200,250,290,150);
    lienzo.stroke();
    
  }
}
 
</script>
 
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
 
El primer punto fijo lo inicializamos llamando al método moveTo:

    lienzo.moveTo(0,150);
 
El segundo punto fijo está indicado en los dos últimos parámetros del método bezierCurveTo (es decir 290,150), en tanto que los dos puntos invisibles son los valores (100,50) y (200,250):

    lienzo.bezierCurveTo(100,50,200,250,290,150);

 

PROBLEMA PROPUESTO

Crear una curva de bézier y hacer que los puntos de atracción cambien de valor. Redibujar la curva cada vez que modificamos dichos valores.

10 - CANVAS (arcos rellenos y lineal)



Para dibujar arcos disponemos del método arc, que tiene los siguientes parámetros:

  arc(x,y,radio,angulo de comienzo, angulo final,sentido antihorario)
 
Los dos parámetros iniciales indican el punto central del arco, el tercero es el radio. Seguidamente indicamos el angulo de comienzo y el angulo final en radianes. Por último debemos pasar un "true" en caso que el arco se dibuje en sentido antihorario y "false" en caso contrario.

Con un ejemplo veremos como hacer para dibujar distintos tipos de arcos lineales y rellenos:

<!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.strokeStyle="rgb(255,0,0)";
    lienzo.beginPath();
    lienzo.arc(100,100,50,0,Math.PI,true);
    lienzo.stroke();
    
    lienzo.strokeStyle="rgb(0,255,0)";
    lienzo.beginPath();
    lienzo.arc(100,200,50,0,Math.PI,false);
    lienzo.stroke();
    
    lienzo.fillStyle="rgb(0,0,288)";
    lienzo.beginPath();    
    lienzo.arc(200,100,50,0,Math.PI,true);
    lienzo.fill();
    
    lienzo.fillStyle="rgb(255,255,0)";
    lienzo.beginPath();
    lienzo.arc(200,200,50,0,Math.PI*2,true);
    lienzo.fill();
    
  }
}
 
</script>
 
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
 
El primer arco se pinta solo el perímetro de color rojo y comienza en el ángulo cero y finaliza en los 180 grados (en radianes es PI), indicamos que avance en sentido antihorario:

    lienzo.strokeStyle="rgb(255,0,0)";
    lienzo.beginPath();
    lienzo.arc(100,100,50,0,Math.PI,true);
    lienzo.stroke();
 
Similar al arco anterior pero ahora indicamos que lo dibuje en sentido horario:
    
    lienzo.strokeStyle="rgb(0,255,0)";
    lienzo.beginPath();
    lienzo.arc(100,200,50,0,Math.PI,false);
    lienzo.stroke();
 
Dibujamos el arco pero luego indicamos que se rellene llamando al método fill en lugar de stroke:
    
    lienzo.fillStyle="rgb(0,0,288)";
    lienzo.beginPath();    
    lienzo.arc(200,100,50,0,Math.PI,true);
    lienzo.fill();
 
Dibujamos un círculo relleno de color amarillo:
    
    lienzo.fillStyle="rgb(255,255,0)";
    lienzo.beginPath();
    lienzo.arc(200,200,50,0,Math.PI*2,true);
    lienzo.fill();




PROBLEMA PROPUESTO

Mostrar un círculo que se desplace de izquierda a derecha. Cada vez que llega a la columna 300 hacer que comience nuevamente en la columna 0.


9 - CANVAS (dibujar varias líneas y rellenar la figura creada)



Cuando creamos una serie de segmentos podemos como hemos visto pintar su perímetro. Pero además podemos llenar su interior con un color.

Confeccionaremos un programa que muestre un triángulo con su interior coloreado:

<!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.strokeStyle="rgb(0,0,255)";
    lienzo.lineWidth=5;
    lienzo.beginPath();
    lienzo.moveTo(150,10);
    lienzo.lineTo(10,290);
    lienzo.lineTo(290,290);
    lienzo.lineTo(150,10);
    lienzo.fill();
    lienzo.stroke();    
  }
}
 
</script>
 
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
 
Inicializamos el color de relleno de la figura:

    lienzo.fillStyle="rgb(255,0,0)";
 
Inicializamos el color del borde de la figura:

    lienzo.strokeStyle="rgb(0,0,255)";
 
Fijamos el ancho de la línea:

    lienzo.lineWidth=5;
 
Indicamos que comenzamos la figura:

    lienzo.beginPath();
 
Movemos el puntero gráfico al primer vértice de nuestro triángulo:

    lienzo.moveTo(150,10);
 
Trazamos el primer segmento:

    lienzo.lineTo(10,290);
 
Trazamos el segundo segmento:

    lienzo.lineTo(290,290);
 
Trazamos el último segmento (que coincide con el punto inicial):

    lienzo.lineTo(150,10);
 
Confirmamos que finalizamos la figura y se proceda a rellenar la figura:

    lienzo.fill();
 
Confirmamos que dibuje el perímetro de la figura:

    lienzo.stroke(); 
   
Tengamos en cuenta que si el punto final no coincide con el punto de origen el método fill traza este último segmento.


PROBLEMA PROPUESTO

Dibujar un paralelogramo de color verde.

jueves, 21 de febrero de 2013

8 - CANVAS (borrar una región)



Para borrar un rectángulo del lienzo debemos utilizar el método clearRect. Los parámetros son similares al método fillRect, es decir x,y,ancho y largo.

Confeccionaremos un programa que dibuje un cuadrado rojo de 300 píxeles de lado y luego borraremos tres cuadraditos en la diagonal principal del cuadrado rojo:

<!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(0,0,300,300);
    lienzo.clearRect(10,10,20,20);
    lienzo.clearRect(140,140,20,20);
    lienzo.clearRect(270,270,20,20);
  }
}
</script>
 
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
 
Como podemos ver primero dibujamos el cuadrado rojo y seguidamente llamamos tres veces a clearRect con las coordenadas respectivas:

    lienzo.fillStyle="rgb(255,0,0)";
    lienzo.fillRect(0,0,300,300);
    lienzo.clearRect(10,10,20,20);
    lienzo.clearRect(140,140,20,20);
    lienzo.clearRect(270,270,20,20);



PROBLEMA PROPUESTO

Dibujar un cuadrado. Luego de 3 segundos hacer que se borre.

7 - CANVAS (rectángulo relleno)



Para dibujar un rectángulo relleno debemos utilizar el método fillRect y previamente fijamos el color interior inicializando la propiedad fillStyle.

Creamos un programa que muestra un rectángulo rojo:

<!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,200,100);
  }
}
</script>
 
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
 
Los parámetros de fillRect son x,y,ancho,alto:

    lienzo.fillRect(10,10,200,100);


 
PROBLEMA PROPUESTO

Dibujar 250 cuadraditos (50 por línea) Los colores de los cuadrados deben empezar en negro y avanzar hasta el rojo.

6 - CANVAS (estilos de línea)



Disponemos de varias propiedades para configurar el etilo de la línea. Mediante un ejemplo veremos como fijar valores a las propiedades: lineWidth, lineCap y lineJoin.

<!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.beginPath();
    lienzo.strokeStyle="rgb(255,0,0)";
    lienzo.lineWidth=7;
    lienzo.moveTo(10,5);
    lienzo.lineTo(10,295);
    lienzo.stroke();
 
    lienzo.beginPath();
    lienzo.strokeStyle="rgb(0,255,0)";
    lienzo.lineCap="butt";
    lienzo.moveTo(30,5);
    lienzo.lineTo(30,295);
    lienzo.stroke();
    lienzo.lineCap="round";
    lienzo.beginPath();
    lienzo.moveTo(50,5);
    lienzo.lineTo(50,295);
    lienzo.stroke();
    lienzo.lineCap="square";
    lienzo.beginPath();
    lienzo.moveTo(70,5);
    lienzo.lineTo(70,295);
    lienzo.stroke();
 
    lienzo.beginPath();
    lienzo.strokeStyle="rgb(0,0,255)";
    lienzo.lineJoin="bevel";
    lienzo.moveTo(100,90);
    lienzo.lineTo(130,10);
    lienzo.lineTo(160,90);
    lienzo.stroke();
    
    lienzo.beginPath();
    lienzo.lineJoin="round";
    lienzo.moveTo(100,180);
    lienzo.lineTo(130,100);
    lienzo.lineTo(160,180);
    lienzo.stroke();
    
    lienzo.beginPath();
    lienzo.lineJoin="miter";
    lienzo.moveTo(100,270);
    lienzo.lineTo(130,190);
    lienzo.lineTo(160,270);
    lienzo.stroke();
    
  }
}
</script>
 
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
 
Para definir el ancho de la línea disponemos de la propiedad lineWidth:

    lienzo.lineWidth=7;
 
La propiedad lineCap indica como se grafican los puntos extremos de la línea:

    lienzo.lineCap="butt";
 
Los valores permitidos son: "butt", "round" y "square".Si disponemos "butt" lo finaliza inmediatamento, si indicamos "round" genera un semicírculo y con "square" dibuja un cuadrado.

La tercer propiedad es lineJoin. Con esta indicamos como debe procederse a graficar en los vértices de uniones de segmentos. Los valores permitidos son: "bevel", "round" y "miter".


PROBLEMA PROPUESTO

Dibujar un triángulo con líneas de 20 píxeles de ancho y los vértices redondeados.

5 - CANVAS (dibujar rectángulo - perímetro)



Para dibujar rectángulos disponemos del método strokeRect. Dispone de cuatro parámetros, los dos primeros indican la columna y fila inicial del rectángulo y los otros dos representan el ancho y alto en píxeles.

El método strokeRect es afectado por la propiedad strokeStyle. Solo se pinta el perímetro del rectángulo indicado.

Dibujaremos un rectángulo ubicado en la columna 50 y fila 10 con un ancho de 200 píxeles y 100 píxeles de altura:

<!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.strokeStyle = "rgb(0,0,255)";
    lienzo.strokeRect(50,10,200,100);
  }
}
</script>
 
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

Activamos el color azul y dibujamos inmediatamente el rectángulo:

    lienzo.strokeStyle = "rgb(0,0,255)";
    lienzo.strokeRect(50,10,200,100);



PROBLEMA PROPUESTO

Dibujar tres cuadrados de color rojo, verde y azul.

4 - CANVAS (dibujar líneas)



Para dibujar líneas disponemos de una serie de métodos que debemos llamar en un orden predeterminado.
El algoritmo para dibujar dos líneas que formen una letra "V" es:

<!DOCTYPE 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.strokeStyle = "rgb(200,0,0)";
    //Inicio de camino
    lienzo.beginPath();
    lienzo.moveTo(0,0);
    lienzo.lineTo(150,300);
    lienzo.lineTo(300,0);
    //Trazar linea
    lienzo.stroke();
   }
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

Inicializamos la propiedad que fija el color de la línea:

     lienzo.strokeStyle = "rgb(200,0,0)";
 
Llamamos al método beginPath para indicar que comenzamos a dibujar la/s línea/s:

    lienzo.beginPath();
 
Movemos el puntero gráfico a la coordenada donde comenzará a dibujarse llamando al método moveTo:

    lienzo.moveTo(0,0);
 
A través del método lineTo trazamos una línea desde donde se encuentra el puntero gráfico hasta la coordenada indicada mediante parámetros:

    lienzo.lineTo(150,300);
 
Trazamos una segunda línea desde donde finalizó la anterior hasta la nueva coordenada:

    lienzo.lineTo(300,0);
 
Para que se hagan efectivas todas la líneas trazadas hasta el momento debemos llamar al método stroke:

    lienzo.stroke();
 
El puntero gráfico se desplaza cada vez que llamamos al método lineTo.



PROBLEMA PROPUESTO:

Dibujar una cuadrícula formada por 10 líneas horizontales y 10 líneas verticales.

3 - CANVAS

CANVAS es una nueva marca del HTML 5, permite dibujar en dicha área mediante JavaScript. El objetivo de este elemento es hacer gráficos en el cliente (navegador), juegos etc. Para hacer un uso efectivo de este nuevo elemento de HTML tenemos que manejar el JavaScript.

La estructura de un programa que accede al canvas es:

<html>
<!DOCTYPE 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(200,0,0)";
     lienzo.fillRect (10, 10, 100, 100);
   }
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="200">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
 
La primer función que implementaremos y será de uso común en todos los problemas es la que retorna la referencia al objeto que nos permite dibujar en el canvas:

function retornarLienzo(x)
{
   var canvas = document.getElementById(x);
   if (canvas.getContext) 
   {
     var lienzo = canvas.getContext("2d");   
     return lienzo;
   }
   else
     return false;
}
 
La función recibe el "id" que hemos especificado en el elemento canvas dispuesto en la página (en este ejemplo le llamamos lienzo1):

<canvas id="lienzo1" width="300" height="200">
Su navegador no permite utilizar canvas.
</canvas>
 
En caso que el navegador no implemente la especificación del elemento canvas produce un falso el if (lo que estamos haciendo en este if es comprobar si existe la función getContext, en caso afirmativo el navegador soporta canvas):

   if (canvas.getContext) 
 

En caso de implementar el canvas obtenemos una referencia del mismo llamando a la función getContext y pasando como parámetro un string con el valor "2d" (a futuro es probable la implementación de un canvas que permita "3d"):

     var lienzo = canvas.getContext("2d"); 
  
La función dibujar es la que se ejecuta luego que se carga la página en el navegador:

function dibujar()
{
   var lienzo=retornarLienzo("lienzo1");
   if (lienzo)
   { 
     lienzo.fillStyle = "rgb(200,0,0)";
     lienzo.fillRect (10, 10, 100, 100);
   }
}
 
En esta función llamamos a la anterior "retornarLienzo("lienzo1") pasando como parámetro el id del canvas respectivo. En caso que la función retorne la referencia al lienzo el if se verificará como verdadero y estaremos en condiciones de comenzar a dibujar en el mismo:

   var lienzo=retornarLienzo("lienzo1");
   if (lienzo)
 
Mediante la variable lienzo podemos acceder a un conjunto de funciones y propiedades disponibles para dibujar. En nuestro ejemplo:

     lienzo.fillStyle = "rgb(200,0,0)";
     lienzo.fillRect (10, 10, 100, 100);
 
Activamos como color de relleno de figura el rojo (200,0,0) y seguidamente llamamos a la función fillRect que dibuja un rectángulo desde la posición (10,10) con ancho de 100 píxeles y un alto de 100 píxeles. La coordenada (0,0) se encuentra en la parte superior izquierda.

 
 



2 - DOCTYPE

La declaración del tipo de documento (DTD Document Type Declaration), esta sección se ubica en la primera línea del archivo HTML, es decir antes de la marca html.

Según el rigor de HTML 4.01 utilizado podemos declararla como:

Declaración transitoria:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
 
 
Declaración estrícta: 
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
 
Ahora con el HTML 5 se simplifica esta sección con la siguiente sintaxis:
 
 
<!DOCTYPE HTML>
 
 
Es importante agregar el DOCTYPE, de esta forma el navegador puede saber 
que estamos utilizando la especificación del HTML 5. 
 

1 - Introducción.

HTML 5 es la quinta revisión más importante que se hace al lenguaje HTML. En esta versión, se introducen nuevas características para ayudar a los autores de aplicaciones Web, y se ha prestado especial atención a la definición de claros criterios de conformidad para los agentes de usuario (navegadores) en un esfuerzo por mejorar la interoperabilidad.