2010-06-18 23 views
22

zrobiłem tablicę kwadratówHTML5 canvas zdarzenia kliknięcia

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

i chcę kwadrat, aby zmienić jego kolor po kliknięciu. Jak mogę to zrobić?

Nie znam się na HTML5 i potrzebuję pomocy. Dzięki.

+0

Spójrz na to pytanie: http://stackoverflow.com/questions/1532739/addeventlistener-in-canvas-tag –

Odpowiedz

31

jQuery:

pierwsze, ustalić, który został kliknięty komórka, to może po prostu zwrócić na to prostokąt o innym kolorze:

$("#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

Ten beta build przez Caleb Evans może pomóc. Następujące zdarzenia są wliczone ...

  • kliknięcie
  • dblclick
  • mouseDown
  • mouseUp
  • mousemove

Link do demo na jsFiddle.