2010-06-18 28 views
22

Ben kareler HTML5 tuval tıklama etkinlik

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

bir dizi yaptı ve ben tıklandığında rengini değiştirmek için bir kare istiyorum. Bunu nasıl yapabilirim?

Çok fazla HTML5 bilmiyorum ve biraz yardıma ihtiyacım var. Teşekkürler. jQuery kullanarak

+0

Bu soruya bir bakın: http://stackoverflow.com/questions/1532739/addeventlistener-in-canvas-tag –

cevap

31

:

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

Caleb Evans tarafından bu beta build yardımcı olabilir:

İlk olarak, tıklandığı hücre belirlemek, o zaman sadece farklı renk ile dikdörtgen olduğu üzerinde çizebilirim. Sonraki etkinlikler

  • tık
  • DblClick
  • mousedown
  • mouseup
  • mousemove

Bağlantı jsFiddle üzerinde demo ... dahildir.