jueves, 21 de marzo de 2013

14 - CANVAS (graficar imagenes)



Para graficar imágenes disponemos del método drawImage, el cual se comporta distinto según la cantidad de parámetros que le pasamos.

La primera forma es llamarlo con los siguientes parámetros:

drawImage(objeto Image, x, y)
 
De esta forma dibuja la imagen con el tamaño real de la imagen, en la coordenada x e y indicada.
La segunda forma es:

drawImage(objeto Image, x, y, ancho, alto)
 
La imagen se redimensiona con los valores indicados en ancho y alto.
La tercer y última forma es:

drawImage(objeto Image, x1, y1, ancho1, alto1,x2, y2, ancho2, alto2)
 
Los primeros cuatro parámetros indican un trozo del la imagen y los cuatro restantes es el lugar donde se debe graficar ese trozo de imagen.

Veamos un ejemplo que utiliza este método:

<!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(0,0,0)";
    lienzo.fillRect(0,0,600,600);
    img1 = new Image(); 
    img1.src = 'foto1.jpg';
    img1.onload = function(){ 
      lienzo.drawImage(img1,0,0);
      lienzo.drawImage(img1,300,0,50,50);
      lienzo.drawImage(img1,0,0,125,125,0,300,72,72);
    }  
  }
}
 
</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 la clase Image:

    img1 = new Image(); 
 
Inicializamos la propiedad src con la fuente de la imagen a recuperar:

    img1.src = 'foto1.jpg';
 
Inicializamos la propiedad onload del objeto de la clase Image con una función anónima:

    img1.onload = function(){ 
      lienzo.drawImage(img1,0,0);
      lienzo.drawImage(img1,300,0,50,50);
      lienzo.drawImage(img1,0,0,125,125,0,300,72,72);
    }  
 
Esta función anónima se ejecuta cuando se finaliza la carga de la imagen en el navegador.

Primero dibujamos la imagen con el tamaño original:

      lienzo.drawImage(img1,0,0);
 
Luego la dibujamos con un ancho de 50 píxeles y 50 del alto.

      lienzo.drawImage(img1,300,0,50,50);
 
Por último dibujamos extrayendo de la imagen original 125 píxeles de ancho y 125 de alto y dibujamos este trozo de imagen en la coordenada (0,300) con un ancho y alto de 72 píxeles.

      lienzo.drawImage(img1,0,0,125,125,0,300,72,72);


PROBLEMA PROPUESTO

Mostrar la foto almacenada en: escritorio descargada por usted de tal forma que aparezca la primer columna de píxeles, luego la segunda columna y así sucesivamente (la foto tiene un tamaño de 249 píxeles de ancho y 251 de alto)
Publicado por en No hay comentarios:

jueves, 7 de marzo de 2013

13 - CANVAS (graficar texto)



Tenemos varias propiedades y métodos relacionados al texto.

Para imprimir texto disponemos de:

fillText(texto,x,y)
 
Con fillText imprimimos un string en la coordenada x e y indicada. Esta coordenada corresponde 
con la parte inferior del texto (es decir no se muestra si indicamos el valor cero en y)
Si queremos que solo se pinte el contorno de cada letra podemos llamar al método:

strokeText(texto,x,y)
 
La fuente a utilizar la inicializamos dando un valor a la propiedad font ej:

    lienzo.font="bold 25px Arial";
 
Podemos hacer que comience la impresión a partir de la coordenada indicada o que este sea el punto central, o final etc. Esto lo hacemos inicializando la propiedad textAlign. Los valores posibles que podemos asignarle a esta propiedad son "start", "end", "left", "right", "center". Por defecto se inicializa con "start".

Si necesitamos conocer el ancho en píxeles de un string según la fuente actual podemos emplear el método:

measureText(string)
 
Confeccionaremos un ejemplo para probar todo lo relacionado al manejo del texto dentro del canvas:

<!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.font="bold 25px Arial";
    lienzo.fillText("Hola Mundo",150,50);
    lienzo.textAlign="center";
    lienzo.fillText("Hola Mundo",150,100);    
    lienzo.textAlign="right";
    lienzo.fillText("Hola Mundo",150,150);
    var anchopx=lienzo.measureText("Hola Mundo");
    lienzo.textAlign="start";
    lienzo.fillText(anchopx.width,150,200);    
    lienzo.strokeStyle="rgb(0,0,255)";
    lienzo.strokeText("Fin",150,250);
  }
}
 
</script>
 
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
 
Definimos el color rojo para el texto:

    lienzo.fillStyle="rgb(255,0,0)";
 
Definimos el tipo de fuente Arial de 25 píxeles y estilo bold:

    lienzo.font="bold 25px Arial";
 
Graficamos el texto "Hola Mundo":

    lienzo.fillText("Hola Mundo",150,50);
 
Cambiamos el tipo de alineación del texto:

    lienzo.textAlign="center";
 
Imprimimos el texto (ahora el texto "Hola Mundo" aparece centrado con respecto a la columna 150):

    lienzo.fillText("Hola Mundo",150,100);  
 
Cambiamos la alineación nuevamente:

    lienzo.textAlign="right";
 
Imprimimos el texto y como tenemos alineación a derecha el texto finaliza en la columna 150:

    lienzo.fillText("Hola Mundo",150,150);
 
Llamamos al método measureText y pasamos como parámetro el texto que imprimimos. Luego este método nos retorna un objeto de la clase TextMetrics (la propiedad width almacena el ancho en pixeles del texto que pasamos anteriormente):

    var anchopx=lienzo.measureText("Hola Mundo");
 
Cambiamos el tipo de alineación:

    lienzo.textAlign="start";
 
Imprimimos la propiedad width:

    lienzo.fillText(anchopx.width,150,200); 
  
Inicializamos el color de línea:

    lienzo.strokeStyle="rgb(0,0,255)";
 
Dibujamos una línea con el método strokeText:

    lienzo.strokeText("Fin",150,250);



PROBLEMA PROPUESTO

Mostrar la fecha actual en la parte superior del canvas centrado.
Publicado por en No hay comentarios:

12 - CANVAS (método quadraticCurveTo)



El concepto de este tipo de curva es similar a la de Bezier. La diferencia es que solo hay un punto de atracción.

Confeccionaremos un ejemplo que muestre una curva de este tipo y desplazaremos el punto de atracción en forma vertical (cada vez que lo desplacemos borraremos el canvas y volveremos a graficar):

<!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;
}
 
var fila=0;
function dibujar() {
  var lienzo=retornarLienzo("lienzo1");
  if (lienzo) {
    lienzo.clearRect(0,0,300,300);
    lienzo.strokeStyle="rgb(255,0,0)";
    lienzo.beginPath();
    lienzo.moveTo(0,150);
    lienzo.quadraticCurveTo(150,fila,300,150);
    lienzo.stroke();    
    fila++;
    if (fila>300)
      fila=0;
  }
}
 
function iniciar() {
  setInterval(dibujar,10);
}
 
</script>
 
</head>
<body onLoad="iniciar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

La función inicar se ejecuta una vez que la página se encuentra cargada, en esta función llamamos a setInterval y le pasamos como parámetro la función que debe ejecutarse cada 10 milisegundos:

function iniciar() {
  setInterval(dibujar,10);
}
 
En la función dibujar lo primero que hacemos el borrar el contenido del canvas:

    lienzo.clearRect(0,0,300,300);
 
Definimos el color de la línea, inicializamos el camino, mediante el método moveTo definimos el primer punto fijo de la curva y seguidamente llamamos la método quadraticCurveTo pasando como parámetro el punto movil y los dos últimos parámetros indican el segundo punto fijo de la curva:

    lienzo.strokeStyle="rgb(255,0,0)";
    lienzo.beginPath();
    lienzo.moveTo(0,150);
    lienzo.quadraticCurveTo(150,fila,300,150);
    lienzo.stroke();   
 
Incrementamos la variable global que permite modificar en cada paso la ubicación del punto de atracción:

    fila++;
 
Si la variable supera el valor 300 volvemos a asignarle el valor 0:

    if (fila>300)
      fila=0;

Publicado por en No hay comentarios:

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.

Publicado por en No hay comentarios:

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.


Publicado por en No hay comentarios:

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.
Publicado por en No hay comentarios:

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.
Publicado por en No hay comentarios:
Suscribirse a: Entradas (Atom)