Javascript 为什么'；t fillRect命令允许创建命中区域，而rect和fill的组合允许吗？

我在使用

CanvasRenderingContext2D.addHitRegion（）

时偶然发现了这个问题，我试图弄清楚这是否是一种预期行为，如果是，背后的原因是什么

这里是我的工作，我创建了一个带有点击区域的画布，可以显示点击区域的id

以下是我添加命中区域的方式：

ctx.beginPath();
ctx.rect(0, i, canvasWidth, itemHeight);
ctx.fill();
ctx.addHitRegion({'id': count, 'cursor': 'pointer'});

这里是同一个例子，只有一个小改动（这就是我最初尝试的方式——当我可以使用一个命令执行相同的操作时，为什么要使用两个命令？）

不幸的是，它不起作用，如图所示

控制台显示以下错误：

未捕获的NotSupportedError:无法在上执行“addHitRegion” “CanvasRenderingContext2D”：指定的路径没有像素

因此，似乎为了创建命中区域，您不能使用

fillRect

命令-我找不到任何关于这种行为的解释

---

我很高兴听到任何想法

fillRect

是

Context2D

的直接命令之一：它创建一个“幕后”路径并立即填充。
这意味着当命中区域需要路径时，它不会像rect那样构建路径。
请注意，您不需要填充它，所以只有在需要时才填充它

顺便说一句，浏览器对hit region的支持不是很好，正如您在这里看到的：，它仍然是实验性的，所以如果您想要/需要广泛的支持，请查看此项

正如@MarkE所引用的，实现命中区域的一种安全方法是自己操作鼠标（

getBoundingClientRect

是您的朋友！）、路径集合，并使用

isPointInPath

检查坐标

---

请记住，

isPointInPath

需要一个路径，因此它不适用于直接命令（fillXXX/strokeXXX/ImageData stuff）。

非常感谢，我不知道Context2D有间接和直接命令！现在我意识到rect创建了一个路径，而fillRect没有。希望这篇文章能节省一些人的时间。请投票获得关于fillRect和path命令的良好解释。您可能会提到，

isPointInPath

可以用作“穷人”添加区域，并且

isPointInPath

得到了很好的支持。

ctx.fillRect(0, i, canvasWidth, itemHeight);
ctx.addHitRegion({'id': count, 'cursor': 'pointer'});