检测弧内点击

Question

如何检测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的）每个弧上下文对象联系起来 - 但没有用 - 所以我想用基本的三角函数来判断鼠标点击是否在界限内。

在此先感谢！

Answer 1

您应该使用

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

如果你建立你的应用程序是这样，这将是很容易添加其他形状