如何检查鼠标位置是否在HTML5 Canvas路径内

Question

我是HTML5 Canvas和Javascript的新手。我目前正在做一个HTML5 Canvas项目(我在这里和这里分别写了一个关于它的问题(。

游戏的逻辑很简单：跟踪鼠标位置，如果鼠标位置退出蓝色区域，游戏就会重置。用户从级别1(function firstLevel(开始。如果他们的鼠标位置进入红框区域，他们将进入下一个级别(return secondLevel()(。我之前通过比较鼠标的x和y坐标的if语句列表来做到这一点。

我已经更正了代码，创建了一个全局构造函数，我可以在每个级别的函数中引用：

function Path(array, color) {
let path = new Path2D();
path.moveTo(array[0][0], array[0][1]); 
for (i = 1; i < array.length; i++) {
path.lineTo(array[i][0], array[i][1]);
}
path.lineTo(array[0][0], array[0][1]);
return path;
} 

其在级别函数中的引用如下：

// In the individual levels, put code that describes the shapes locally
var big = [[350,200], [900,200], [900,250], [700,250], [600,250], [600,650], [350,650]];
var blue = Path(big);
var small = [[900,200], [900,250], [850,250], [850, 200], [900, 200]];
var red = Path(small);
// 2. create cursor
c.beginPath();
c.rect(mouseX, mouseY, mouseWidth, mouseHeight);
c.fillStyle = "#928C6F";
c.fill();
// Local code that draws shapes:
c.beginPath()
c.fillStyle = '#C1EEFF';
c.fill(blue);
c.beginPath()
c.fillStyle = "#FF4000";
c.fill(red);

我想知道如何检查鼠标位置，以便它可以使用isPointInPath方法运行这些条件语句？我现在有了Canvas形状的参考(参考文献blue和red(，所以我希望有一种方法可以检查鼠标的x和y位置是否是形状/路径内的点。

我的项目链接：https://github.uconn.edu/pages/ssw19002/dmd-3475/final-project/maze-page-1.html

源代码：https://github.uconn.edu/ssw19002/dmd-3475/tree/master/final-project

Answer 1

您可以使用鼠标事件(如mousemove(的MouseEvent.offsetX和MouseEvent.offsetY属性。(当然，您需要在画布元素中添加鼠标事件的事件侦听器。(

然后使用获得的x和y偏移值来调用类似的isPointInPath

ctx.isPointInPath(path, x, y)

其中CCD_ 13是来自CCD_。

而MDN将偏移特性列为"0"；实验性的"；他们似乎至少从IE9开始就存在了。