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:
Suscribirse a: Entradas (Atom)