Javascript 附加到画布内对象的事件

我有简单的画布代码，可以在画布上绘制rect

var x=document.getElementById("canvas");
var ctx=x.getContext("2d");
ctx.rect(20,20,150,100);
ctx.stroke();

---

是否可以在所述rect上添加eventListener？例如，如果我单击rect，它将变为红色。

图形和路径作为副作用绘制到画布，因此没有可添加事件侦听器的元素；但是，您可以将事件侦听器添加到整个画布或与画布共享位置的元素中，单击该事件侦听器后，使用红色矩形（或任何其他更改）重新绘制画布。（使用

.clearRect（）

方法重新绘制画布之前，请确保清除画布）

如果在画布上绘制某个对象，则绘制的形状不是javascript对象，而是更改画布所处的特定状态。因此，您不能将事件侦听器附加到它，而应该将事件附加到画布本身

然后，javascript可以检查单击的坐标，并确定它是否在矩形内。请记住，如果您在矩形或形状的顶部绘制一些东西，则必须调整代码以检查形成的新区域。如果该区域不是矩形，您可能会发现很难检查该区域，但仍然可以

如果要将矩形重绘为红色，应重新绘制画布，更改重绘的新矩形的颜色（矩形不是对象，因此不能直接更改颜色）。这还需要在画布上重新绘制所有其他形状。

Regions 根据您对各种浏览器和旧浏览器的支持程度，您可以通过Firefox和Chrome中的标志启用

addHitRegion（）

Firefox:about:config->search“hitregions”并设置为true

铬：chrome://flags/ ->启用实验画布功能

这是唯一直接与事件系统集成的技术。不过，我还不推荐将其用于生产，而且AFAIK也没有polyfill，但为了展示它的易用性：


var x=document.getElementById（“画布”）；
var ctx=x.getContext（“2d”）；
ctx.rect（20,20150100）；
ctx.addHitRegion（{id:“demo”}）；//在Chrome/Firefox中启用in标志
ctx.stroke（）；
x、 addEventListener（“单击”，函数（e）{
如果（e.region&&e.region==“demo”）警报（“命中！”）；
})
您可以收听画布上的单击，并从中确定它是否在矩形中，但没有要绑定到的仅矩形的特定元素。您可能会发现这很有趣。使用[addHitRegion方法]（）这是一个很好的答案！信息量大而且有用。谢谢如果可以，我会投更多的票，这太棒了。。。请注意：我认为第一个有问题snippet@WashingtonGuedes并没有错，但如上所述，您需要通过Firefox（about:config->search“hitregions”）和Chrome中的标志来启用它(chrome://flags/ ->启用实验画布功能）@WashingtonGuedes没问题，谢谢您的支持。我更新了答案，使这一步更加清晰。