Canvas 画布圆检测单击位置

我在画布上画了一个圆圈，假设它是一个音乐播放器的seekbar，从顶部顺时针方向移动

 <div id="wrapper"><canvas id="canvas" width="200" height="200"></canvas></div>

是否有可能检测到绿色矩形的点击（在任何地方，但在中间的圆圈中，将绘制暂停/播放按钮）。因此，我需要一个百分比（1-100），例如，用户单击右中角及其0.25%，或1/4，依此类推

如果它在圆圈中间被点击，而不是我需要运行暂停/播放函数，但是它点击任何地方我都需要得到一个百分比。< /P>

---

我正在使用jquery。

您可以使用jquery获得单击事件的坐标：

$("#canvas").click(function(event) {
        var x = event.pageX - canvas.offsetLeft;
            var y = event.page - canvas.offsetTop;

        });

然后你必须分析（x，y）坐标：

如果点（x，y）位于中间圆内，则调用函数pause/play 如果不是，你必须计算画布中心线到（X，Y）点和画布中间的垂直线之间的夹角。例如，90度角等于25%，180度角等于50%，等等

我不知道我是否清楚…

请查看源代码。 您可以使用相同的方法获得百分比：

var x = e.pageX - canvas.offsetLeft - w/2,
    y = e.pageY - canvas.offsetTop - h/2,
    mAngle = Math.atan2(y, x);

if (mAngle > -1 * Math.PI && mAngle < -0.5 * Math.PI) {
    mAngle = 2 * Math.PI + mAngle;
}

var percentage = (mAngle + Math.PI / 2) / 2 * Math.PI * 10;

var x=e.pageX-canvas.offsetLeft-w/2，
y=e.pageY-canvas.offsetTop-h/2，
mAngle=数学atan2（y，x）；
if（mAngle>-1*Math.PI&&mAngle<-0.5*Math.PI）{
mAngle=2*Math.PI+mAngle；
}
风险值百分比=（mAngle+Math.PI/2）/2*Math.PI*10；

---

演示：

< P>为了处理中点的点击，可以检查点（x，y）与圆的中心之间的距离（内圆的中心是（0））

多亏了上面的4条线，您知道用绿色绘制的内圈的半径为60（radius-strokeSize=100-40=60）。因此，要检测内圈内的点击，点击点与中心之间的距离必须小于60

为此，使用以下方法完成DMK的解决方案：

if ( Math.sqrt(x*x + y*y) > 60 ) {
   // compute the angle and do your stuff
} else {
   // call the pause/play function
}

---

你可以吗？< / P>好的，谢谢你的帮助，但是我不知道怎样写这数学。这很好，但是如果我在中间点击，它会触发相同的事件。我怎么能排除圆中心和重定向动作在其他地方？如何检查中间的圆圈点击小提琴：好的，还有一个问题。在这个例子中，我如何画中间的暂停/播放图标？您可以使用

drawImage

方法太慢。。。dmk更快；）

if ( Math.sqrt(x*x + y*y) > 60 ) {
   // compute the angle and do your stuff
} else {
   // call the pause/play function
}