如何使用JavaScript在画布中单击一个圆圈

我想分别单击圆形数组中的每个圆形。因为我想在被点击后为每个圆圈执行不同的任务。虽然当我点击圆圈时，数组圆圈[]中存储了多个圆圈，但没有一个圆圈，警报不会显示，它会显示警报5次。我假设这是随机绘制的最后一个圆，只有这个圆具有点击效果！ 有人能帮我弄清楚吗

const canvas=document.getElementById（'flower'）；
const ctx=canvas.getContext（'2d'）；
var offsetX=canvas.offsetLeft；
var offsetY=canvas.offsetTop；
var循环=[]；
函数main（）{
如果（文档类型！==“未定义”）{
var r=20；
对于（var j=0；j要获得预期结果，请使用下面的选项使用
isPointInPath
方法来检测画布形状的点击

使用Path2D构造函数绘制圆


常数圆=新路径2D（）；
圆弧（cx，cy，r，0，2*Math.PI）；
ctx.fillStyle=颜色；
ctx.填充（圆圈）；

使用下面的单击事件侦听器


canvas.addEventListener（“单击”），函数（事件）{
if（ctx.isPointInPath（圆圈，event.clientX，event.clientY））{
警惕（“你在圈内”）；
}
});

有关详细信息，请参阅此链接

示例工作代码供参考


const canvas=document.getElementById（“花”）；
const ctx=canvas.getContext（“2d”）；
var offsetX=canvas.offsetLeft；
var offsetY=canvas.offsetTop；
var循环=[]；
函数main（）{
if（文档类型！=“未定义”）{
var r=20；
对于（var j=0；j<5；j++）{
var cx=random（）*canvas.width；
var cy=random（）*canvas.height；
var r=25；
变色=
“rgb（”+
数学地板（随机（）*256）+
"," +
数学地板（随机（）*256）+
"," +
数学地板（随机（）*256）+
")";
常数圆=新路径2D（）；
圆弧（cx，cy，r，0，2*Math.PI）；
ctx.fillStyle=颜色；
ctx.填充（圆圈）；
canvas.addEventListener（“单击”），函数（事件）{
if（ctx.isPointInPath（圆圈，event.clientX，event.clientY））{
警惕（“你在圈内”）；
}
});
}
}
}
var种子=1；
函数随机（）{
var x=Math.sin（seed++）*10000；
返回x——数学楼层（x）；
}
main（）；
html，主体，div{
宽度：100%；
身高：100%；
保证金：0；
}

var dx=cx-clickX；
，但是
cx
是上一次迭代中的一个。因此，您正在检查每个循环的单击是否在最后一个循环内。我理解问题，但仍然无法找到解决方案：，（非常感谢。它确实有帮助。我没有提到“isPointInPath”！如果使用MouseEvent的
clientXXX
，则需要考虑画布元素在屏幕中的位置。