如何在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) - 但这不起作用 - 所以我想使用基本的三角函数来确定是否鼠标单击是否在边界内。
提前致谢!
答案 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);
}
如果你像这样构建你的应用程序,也很容易添加其他形状