2010-06-18 13 views
22

me hizo una serie de cuadradosHTML5 caso de lona clic

ctx.fillStyle = "rgb(0,0,0)"; 
for(x=0;x<=25;x++){ 
    for(y=0;y<=25;y++){ 
     ctx.fillRect(x, y, 20, 20); 
    } 
} 

y quiero un cuadrado para cambiar su color cuando se hace clic. ¿Cómo puedo hacer eso?

No sé mucho HTML5 y necesito ayuda. Gracias.

+0

Eche un vistazo a esta pregunta: http://stackoverflow.com/questions/1532739/addeventlistener-in- canvas-tag –

Respuesta

31

Usando jQuery:

En primer lugar, se determina qué célula se ha hecho clic, a continuación, usted podría dibujar sobre ese rectángulo con un color diferente:

$("#canvas").click(function(e){ 

    var x = Math.floor((e.pageX-$("#canvas").offset().left)/20); 
    var y = Math.floor((e.pageY-$("#canvas").offset().top)/20); 
    ctx.fillStyle = "rgb(255,255,255)"; 
    ctx.fillRect(x*20, y*20, 20, 20); 


}); 
6

Este beta build por Caleb Evans podría ayudar. eventos siguientes se incluyen ...

  • clic
  • dblclick
  • mousedown
  • mouseup
  • mousemove

Enlace a la demo en jsFiddle.

Cuestiones relacionadas