如何检测 HTML Canvas 元素中绘制的圆弧内的鼠标单击?
我正在像这样创建弧:
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) - 但这不起作用 - 所以我想使用基本三 Angular 函数来确定是否鼠标点击是否在范围内。
提前致谢!
最佳答案
你应该使用
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);
}
如果您像这样构建应用程序,添加其他形状也会很容易
关于javascript - 检测弧内点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10403548/