2010-06-18 14 views
22

나는 사각형 HTML5 캔버스 클릭 이벤트

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

의 배열을 만든 내가 클릭하면 색상을 변경하는 사각형을합니다. 어떻게해야합니까?

많은 HTML5를 알지 못해 도움이 필요합니다. 감사. jQuery를 사용

+0

이 질문을보십시오. http://stackoverflow.com/questions/1532739/addeventlistener-in-canvas-tag –

답변

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

갈렙 에반스의이 beta build 도움이 될 :

는 첫째, 우리가 클릭 된 셀을 결정, 당신은 단지 다른 색으로 사각형 것을 이상 그릴 수 있습니다. 다음과 같은 이벤트가

  • 클릭
  • dblclick
  • mousedown
  • mouseup에
  • MouseMove 이벤트

링크 jsFiddle에 데모하는 ... 포함되어 있습니다.