如何识别点击上绘制的矩形在画布上

说我们drawed在HTML5画布多个矩形：如何识别点击上绘制的矩形在画布上

context.fillStyle='black'; 
    context.fillStroke='black'; 
    context.beginPath(); 
for(var i=0; i<50; i++) 
{ 
    context.rect(i*20,i*20,w,h); 
//this is just some random configuration for the rectangles, it doesn't really matter how they are positioned 
} 
    context.closePath(); 
    context.fill(); 
    context.stroke();

我怎样才能使它所以它的识别时，对单个矩形用户点击后，说，改变它的颜色？

是否有可能或将不得不做一个函数，它需要鼠标的x和y坐标，然后检查它的着陆点与矩形的x和y坐标相比，最终找到一个“覆盖”鼠标坐标？

来源

2015-10-15 badso

看看这个命中测试（可能是重复的）计算器后：http://stackoverflow.com/questions/15176968/how-to-change-mouse-over-to-onclick/15179322#15179322 – markE

IMO最好跟踪数组中的矩形，并通过它们循环查看它是否在里面。

如前所述Here：

当你画到画布元素，你只是在立即模式绘制位图。

所绘制的元素（形状，线条，图像）除了有他们使用的像素和它们的颜色没有表示[...]

这里谈到的但：我发现这Alternative

来源

2015-10-15 02:35:39 FirstOne

谢谢，没有想到通过这种方式来识别点击。但我猜另一种方式，通过点击坐标效率更高，因为它只会在用户点击时才会进行操作，而不同于不断地点击点击。 – badso

此外，如果您打算使用矩形列表，请确保您检查正确的一个，如果他们有一些部分被另一个覆盖; D。 @Vic – FirstOne

如何识别点击上绘制的矩形在画布上

回答

相关问题