HTML5-Canvas-Klick-Ereignis

Question

Ich habe eine Reihe von Quadraten

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

und ich möchte ein Quadrat seine Farbe ändern, wenn darauf geklickt. Wie kann ich das machen?

Ich weiß nicht viel HTML5 und brauche etwas Hilfe. Vielen Dank.

Answer 1

jQuery verwenden:

Zuerst ermitteln wir, welche Zelle geklickt wurde, dann könnte man einfach ziehen über das Rechteck mit einer anderen Farbe:

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


}); 

Answer 2

Diese beta build von Caleb Evans helfen könnte. Folgende Veranstaltungen sind im Preis inbegriffen ...

• klicken
• dblclick
• mousedown-
• mouseup
• mousemove-

-Link auf der jsFiddle Demo.