检测弧内点击

时间:2012-05-01 20:02:56

标签: javascript html canvas

如何在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) - 但这不起作用 - 所以我想使用基本的三角函数来确定是否鼠标单击是否在边界内。

提前致谢!

1 个答案:

答案 0 :(得分:2)

你应该使用

  

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);
}

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