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