Javascript 检测鼠标是否位于画布内的对象上

我在画布元素中创建了一条线。我正在寻找最简单的方法来检测鼠标的位置是否在画布内的线条内

我曾使用此函数查看鼠标在画布中的位置，但我对如何继续操作感到非常困惑

function getMousePos(c, evt) {
            var rect = c.getBoundingClientRect();
            return {
                x: evt.clientX - rect.left,
                y: evt.clientY - rect.top
            };
        }

我也看过这个主题，但是它检测鼠标是否在画布内，而不是对象内

我创建的线是较小线的一部分，它们相互连接

 for (var i = 0; i < 140 ; i++) {

                ctx.beginPath();

                ctx.moveTo(x[i],y[i]);
                ctx.quadraticCurveTo(x[i],50,x[i+1],y[i+1]);
                ctx.lineWidth = 40;

                ctx.strokeStyle = 'white';
                ctx.lineCap = 'round';
                ctx.stroke();

            }

for（变量i=0；i<140；i++）{
ctx.beginPath（）；
移动到（x[i]，y[i]）；
ctx.二次曲线（x[i]，50，x[i+1]，y[i+1]）；
ctx.lineWidth=40；
ctx.strokeStyle=‘白色’；
ctx.lineCap='圆形'；
ctx.stroke（）；
}

其中x[i]和y[i]是具有我想要的坐标的数组

我希望我的问题很清楚，尽管我对javascript不是很熟悉

谢谢 迪米特拉演示：

您需要以下概念来检查鼠标是否在直线内：

• 定义直线的起点和终点

• 侦听鼠标事件

• 在mousemove上，检查鼠标是否在直线的指定距离内

下面是供您学习的带注释的示例代码

$（函数（）{
//画布相关变量
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var$canvas=$（“#canvas”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
//dom元素，指示鼠标是否在线内/线外
var$hit=$（“#hit”）；
//确定鼠标离直线的距离
//使鼠标位于线内
变异系数容差=5；
//定义直线的起点和终点
变量行={
x0:50，
y0:50，
x1:100，
y1:100
};
//设置画布的填充样式
ctx.fillStyle=“红色”；
//第一次划清界限
画（线）；
//函数来画线
//当鼠标在里面时，可以选择画一个点
函数绘制（直线、鼠标X、鼠标Y、直线X、直线Y）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
ctx.moveTo（line.x0，line.y0）；
ctx.lineTo（第x1行，第y1行）；
ctx.stroke（）；
if（mouseX&&lineX）{
ctx.beginPath（）；
ctx.弧（lineX，lineY，公差，0，数学PI*2）；
ctx.closePath（）；
ctx.fill（）；
}
}
//计算这条直线上的点
//最接近鼠标位置
函数linepointNearestMouse（直线、x、y）{
//
lerp=函数（a、b、x）{
回报率（a+x*（b-a））；
};
var dx=line.x1-line.x0；
var dy=line.y1-line.y0；
var t=（（x-line.x0）*dx+（y-line.y0）*dy）/（dx*dx+dy*dy）；
var lineX=lerp（第x0行、第x1行、第t行）；
var lineY=lerp（第0行，第1行，第t行）；
返回({
x:lineX，
y:莱尼
});
};
//处理mousemove事件
//计算鼠标离直线的距离
//如果该距离小于公差，则
//在线条上显示一个点
功能手柄移动（e）{
e、 预防默认值（）；
e、 停止传播（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（e.clientY-offsetY）；
if（mouseXline.x1）{
$hit.text（“外部”）；
画（线）；
返回；
}
var linepoint=linepointNearestMouse（line、mouseX、mouseY）；
var dx=鼠标x-线条点.x；
var dy=鼠标-线条点.y；
var距离=Math.abs（Math.sqrt（dx*dx+dy*dy））；
if（距离<公差）{
$hit.text（“行内”）；
绘制（直线、鼠标、鼠标、线点.x、线点.y）；
}否则{
$hit.text（“外部”）；
画（线）；
}
}
//告诉浏览器调用handleMousedown
//每当鼠标移动时
$（“#画布”）.mousemove（函数（e）{
手推车（e）；
});
}); // end$（函数（）{}）
正文{
背景颜色：象牙色；
}
帆布{
边框：1px纯红；
}

将鼠标移近直线
非常感谢您的回答。我想知道我是否可以用这条曲线（这是更多线的一部分）。我将编辑我的问题，以明确到目前为止我是如何创建这一行的。如果您的路径已关闭，则可以使用
isPointInPath
查看鼠标是否位于关闭的路径内。现代浏览器支持一种新的
isPointInStroke
。isPointInStroke将命中测试线路径。否则你将不得不像我的回答中那样“手工操作”。另一种方法是获取画布上的所有像素数据，然后检查鼠标下的像素是否不透明（在线上）或透明（不在线上）。不，我的路径未关闭。所以，我想我不能用“isPointInStroke”。我找到了这个链接，也许有一个更简单的解决方案可以满足我的需要。如果你能容忍一些误报，你仍然可以使用
isPointInPath
。示例：isPointInPath点击测试将为您“无形地关闭”路径，并点击测试关闭的路径……下面是一个从画布读取像素的示例。您可以测试此像素阵列，以查看鼠标是否位于不透明像素（线的一部分）上：