toile HTML5 cliquez événement

Question

J'ai fait un tableau de carrés

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

et je veux un carré de changer sa couleur quand on clique dessus. Comment puis je faire ça?

Je ne connais pas beaucoup HTML5 et j'ai besoin d'aide. Merci.

Answer 1

En utilisant jQuery:

Tout d'abord, on détermine quelle cellule a cliqué, alors vous pouvez dessiner sur ce rectangle avec une couleur différente:

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

Ce beta build par Caleb Evans pourrait aider. les événements suivants sont inclus ...

• cliquez
• dblclick
• mousedown
• mouseup
• mousemove

Lien vers démo sur jsFiddle.