检测弧内咔嗒声

Detect click inside arc

本文关键字：检测      更新时间：2023-09-26

如何检测在HTML画布元素中绘制的弧内的鼠标单击？

我正在像这样创建弧线：

ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, 0, 0, 0, true);
ctx.fill();

我确实尝试将绘制的每个弧的上下文对象关联到然后使用 myArc.ctx.isPointInPath（mouseX， mouseY） - 但这不起作用 - 所以我想使用基本的三角函数来确定鼠标单击是否在边界内。

提前感谢！

你应该

使用

ctx.isPointInPath（x， y）;

我所做的是将 beginPath，路径"绘制"移动到一个函数中，我也调用它进行绘图，以及确定鼠标是否点击形状。

function shape() {
    ctx.beginPath();
    ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
    ctx.arc(250, 250, 0, 0, 0, true);
}
function draw() {
    shape();
    ctx.fill();
}
function checkHit(x, y) {
    shape();
    return ctx.isPointInPath(x, y);
}

如果您像这样构建应用程序，也很容易添加其他形状

相关文章：