Question

假设我们在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坐标相比的位置，最后找到“覆盖”鼠标的那个坐标？

Answer 1

IMO最好跟踪数组中的矩形，然后循环遍历它们以查看它是否在内部。

如上所述Here：

当您绘制到canvas元素时，您只需绘制一个位图   立即模式。

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

BUT ：我找到了Alternative

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

1 个答案: