Tutoriales - HTML 5 -

lunes 16 de enero de 2012

Exportar Imagen desde canvas Html5 a archivo

Este post no lo vamos a considerar un tutorial ya que es bastante corto y muy sencillo. Para exportar desde un canvas a una imagen primero abrá que mirar los siguientes tutoriales:

-Dibujo simple con Canvas de HTML5

-Dibujar a mano alzada en Canvas de Html5

Para mostrar la imagen resterizada tendremos que añadir simplemente la función de javascript:

function exportar(){

window.open(canvas.toDataURL());

}

Muchas gracias, os intentare ayudar si tenéis dudas.

lunes 2 de enero de 2012

NOVEDAD: Ahora en tutorialeshtml5.com también habrán tutoriales Android!

Pues sí señores a partir de ahora también publicaré tutoriales para programar Android de una forma muy sencilla! Hace tiempo que no publico pero no he tenido tiempo, agradezco todos sus comentarios y participaciones. La programación para android se basa normalmente en Java, yo para programar java utilizo en programa Eclipse aunque hay muchos otros.

El primer tutorial que haré será para preparar nuestro eclipse para programar e instalar el emulador de android con su SDK que ya explicaremos de que se trata. Espero escribirlo pronto.

Muchas Gracias!

lunes 28 de marzo de 2011

Insertar video en canvas = +efectos

Hoy os voy a enseñar un post de Html5Doctor donde nos explican muy bien como crear efectos maravillosos. La página és en ingles aunque no creo que importe mucho. En Html5Doctor nos explican a introducir un video ya sea ogg, mp4 o webm en un Canvas Html5 y así poder editarlo y añadirle efectos.

A continuación algunas impresiones de pantalla sobre los resultados obtenidos:

-efecto blanco y negro-

-efecto arena 3d-

Para ver los tutoriales y ejemplos visite el post oficial:

http://html5doctor.com/video-canvas-magic/

No olviden escribir su comentario!!!

viernes 25 de marzo de 2011

Librería Gráficos 3D en Canvas

Hoy os presento esta fantástica librería para crear gráficos 3D en canvas. El nombre de la librería es canvas3DGraph.js el funcionamiento es muy sencillo y además contamos con la pagina web del proyecto donde podemos encontrar ejemplos y una demo para poder toquitear.

Paginas web con la librería y ejemplos:

http://dragan.yourtree.org/code/canvas-3d-graph/

No olviden escribir su comentario!!!

martes 22 de marzo de 2011

Dibujar a mano alzada en canvas HTML5

Este tutorial es bastante sencillo de entender y de poner en práctica. Para entenderlo mejor podríais mirar antes el tutorial de Dibujo simple con Canvas. Lo que vamos hacer es crear un canvas de gran tamaño con fondo negro.

Para lograr el efecto de dibujo a mano alzada en este caso usaremos las coordenadas por donde se mueve el cursor(ratón) y dibujar (como está explicado en Dibujo simple con Canvas) un cuadrado blanco de 3x3 px. Así cada vez que el cursor se mueva irá dejando el rastro blanco, simulando un pincel.

Como siempre creamos el canvas en html:

<canvas id="canvas" width="900" height="600">
<p>Su navegador no soporta HTML5</p>
</canvas>

También tendremos que modificar el tag BODY, que será el encargado de llamar a la función de dibujo cada vez que se mueve el cursor:

<body onmousemove="pintar(event)" style="margin:0;padding:0;">

Como veis también hemos añadido un "style" con margen y padding 0, esto lo hacemos para no tener problemas entre las coordenadas del BODY y las reales.

Empecemos con el Javascript. Ahora pintaremos el fondo del canvas en negro y crearemos las variables posX y posY donde grabaremos las coordenadas del raton.

var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 ctx.fillStyle = "#000";
 ctx.fillRect (0, 0, 900, 600);
  var posx = 0;
  var posy = 0;

Y ahora la función estrella de este tutorial, pintar(e) donde e será el event que le envia el BODY en este caso el cursor. Simplemente lo que hace esta funcion es dibujar un cuadrado en las coordenadas enviadas por el cursor:

function pintar(e){
 posx = e.clientX;
  posy = e.clientY;
  ctx.fillStyle = "#FFF";
  ctx.fillRect (posx, posy, 3, 3);
}

Y con esto acabaríamos. Aquí tenéis el ejemplo para ver el resultado:

No olviden escribir su comentario!!!

lunes 14 de marzo de 2011

Interactuar con Canvas HTML5 (click)

En este tutorial vamos a ver cómo poder hacer click en una región del Canvas Html5, identificar esa región y llamar a la función especificada para esa región/botón.

Para este tutorial hemos creado un cuadrado verde dentro de un canvas que al hacerle click ara un movimiento vertical hasta que se detiene.

Primero de todo crearemos el canvas en el html5 tamaño 500px x 500px en este tutorial és de vital importancia saber el tamaño del canvas:

<canvas id="canvas" height="500px" width="500px">
Su navegador no soporta Canvas!
</canvas>

A partir de aquí todo será JavaScript.

Lo primero que pondremos en el Js será el window.onload que és lo primero que se ejecutará al iniciar la página. Dentro del window.load pondré dos funciones que explicaré más abajo. El resultado sería este:

window.onload = function(){
 dibujar(x,y,x2,y2);
 click();
 };

Ahora crearemos la funcion dibujar(), para entenderla mejor mirar el tutorial de cómo dibujar en canvas. Lo que ará esta funcion dibujar() será dibujar un cuadrado de color verde. Que más adelante lo utilizaremos como si fuena un "botón".

function dibujar(x,y,x2,y2){
 canvas = document.getElementById("canvas");
 ctx = canvas.getContext("2d"); 
 ctx.fillStyle = "green";
 ctx.fillRect(x, y, x2, y2);
 ctx.fill();
}

Una vez dibujado el cuadrado crearemos la función click() que és la más importante. Será la encargada de activarse cuando hagamos click en el cuadro. Para eso añadiremos un addEventListener para reconocer cuando se ha clickado. El código comentado sería el siguiente:

function click(){
//Añadimos un addEventListener al canvas, para reconocer el click
canvas.addEventListener("click",   
 //Una vez se haya clickado se activará la siguiente función
 function(e){
  /** Las siguientes 2 líneas lo que hacen és saber en que 
  *   parte del canvas se ha clickado. Si ha clickado dentro
  * del cuadrado se activará mover().
  * La operación que utilizamos es restar la parte izquierda que sobra
  * des del canvas asta el explorador (cancas.offsetLeft)
  * con el click (e.clientY)
  */
  if(e.clientX-canvas.offsetLeft > 200
   && e.clientX-canvas.offsetLeft < 280){  
   //Aqui lo mismo que en la anterior sólo que miramos alto y 
   //ancho del cuadrado
   if(e.clientY-canvas.offsetTop > 300
    && e.clientY-canvas.offsetTop < 380){  
    //si ha clickado dentro del cuadro verde
    mover();   
   } 
  }
 }
 ,false);}

Por último creamos la función mover() simplemente la he creado para que se vea el efecto del click sobre el cuadro verde.

function mover(){
 //vamos restando la coordenada Y hasta un límite de 150
 if(y>150){
  y--;
  //es la encargada de llamar cada 10 milesimas a la funcion mover()
  //y así crear el efecto de movimiento
  setTimeout(mover,10);
 }
  //tendremos que ir limpiando el canvas
  //para evitar que se cree una columna
  //por culpa de que los cuadrados se vayan solapando
  limpiar();
  //dibujamos el cuadrado otra vez con la coordenada Y modificada
  //la modificación la hemos creado más arriba
  dibujar(x,y,x2,y2);
}

La función limpiar() és muy simple, dibujaremos un rectangulo blanco que ocupe todo el ancho y alto del canvas:

function limpiar(){
 ctx.fillStyle = "white";
 ctx.fillRect(0, 0, 500, 500);
}

Esto ha sido todo. La finalidad de este tutorial es saber añadir el addEventListener para poner hacer click al canvas, y después crear unas condiciones (if) para saber si ha clickado en la parte del canvas donde este el botón verde en este caso.

Para ver el ejemplo finalizado haga click en el siguiente botón:

No olviden escribir su comentario!!!

miércoles 2 de marzo de 2011

Tile5, librería de mapas Html5

Hoy os presento Tile5, una estupenda librería JavaScript para visualizar mapas. Tienen muchos estilos y diferentes tipos de mapa. En su web podéis encontrar la documentación y sus correspondientes tutoriales.