HTML5画布点击事件

Question

我制作了一系列正方形

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并需要一些帮助.谢谢.

Answer 1

使用jQuery:

首先,我们确定单击了哪个单元格,然后您可以使用不同的颜色绘制该矩形:

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

这个由Caleb Evans 构建的测试版可能有所帮助.以下活动包括在内......

• 点击
• DBLCLICK
• 鼠标按下
• 鼠标松开
• 鼠标移动

链接到jsFiddle上的demo.