Javascript 在画布元素上创建与鼠标事件交互的碰撞区域

我想在画布元素周围创建一个冲突区域，使我能够使用鼠标事件和javascript与该元素交互

以下是关于我的问题的详细说明：

首先，我用x、y、radius、beginAngle、endAngle和颜色参数创建一个弧段构造函数

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

/* arc class constructor */
function ArcSegment(x, y, radius, beginAngle, endAngle, segColor) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.beginAngle = beginAngle;
    this.endAngle = endAngle;
    this.segColor = segColor;

    this.update = function() {
        this.draw();
    }

    this.draw = function(){
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, this.beginAngle, this.endAngle, false);
        ctx.lineWidth = 20;
        ctx.strokeStyle = this.segColor;
        ctx.stroke();
    }
}

其次，我添加了一些值来创建这些弧段

/* x, y, radius, startAngle, endAngle and color */

var centerX = canvas.width/2;
var centerY = canvas.height/2;

var radiuses = [
    100,
    120
];

var pi = Math.PI;
var segmentStart = [
    pi/2,
    0
];

var segmentRotation = [
    1.4*pi,
    0.2*pi
];
var segmentColors = [
    "#133046",
    "#15959F"
];

然后，我把它们画在画布上

var segment1 = new ArcSegment(centerX, centerY, radiuses[0], segmentStart[0], segmentStart[0]+segmentRotation[0], segmentColors[0]);
segment1.update();

var segment2 = new ArcSegment(centerX, centerY, radiuses[1], segmentStart[1], segmentStart[1]+segmentRotation[1], segmentColors[1]);
segment2.update();

结果如下：

我现在想要的是一种在创建的每个弧段顶部创建碰撞检测的方法，以便在特定弧段顶部单击或移动鼠标时

可能会发生一系列事件（例如旋转动画等…）

我所做的所有研究都建议获得矩形的x和y值，并计算鼠标位置的距离（mouse.x，mouse.y）和矩形的长度，但该方法不适用于具有线宽属性的圆弧段

---

在此问题上的任何帮助都将不胜感激

下面是一个纯数学方法，这里的关键是代码

isPointInside

//类
功能弧（x、y、角度、弧、半径、颜色、高亮颜色）{
这个.x=x；
这个。y=y；
这个角度=角度；
this.arc=弧；
这个半径=半径；
这个颜色=颜色；
this.highlightcolor=highlightcolor；
此参数为0=假；
此参数为0.lineWidth=20；
}
Arc.prototype={
isPointInside:函数（x，y）{
var_x=x——这个.x；
var _y=y——这个.y；
变量距离=数学sqrt（x*x+y*y）；
var invDistance=1.0/距离；
var angle=Math.acos(
_x*Math.cos（此角度）*invDistance+
_y*Math.sin（这个角度）*距离
);
返回距离>（this.radius-this.lineWidth/2）和
距离<（此半径+此线宽/2）和
角度

---

你有没有研究过JS游戏引擎？你打算用纯JS做这件事吗？@HelderSepu是的，我已经下定决心用纯JS做这件事，这样我就可以更好地了解游戏引擎在创建矩形碰撞框时是如何工作的查看isPointInPath下面是一个例子：史密斯先生，我对你的代码做了一些更改，减少了代码以更好地融入代码片段，并更改了弧以更好地匹配问题…非常感谢您的帮助，非常感谢