Javascript 如果在圆圈中找到或未找到单击的点，则打印fit消息

我有一个中心坐标

（x1，y1）

和两个圆的半径（

r

）

我还有一个点

A（x2，y2）

，就是鼠标点击的点

我编写了一个函数，如果在圆内或圆外找到点a，它将打印一条消息

这是我的JSFIDLE：

我想知道下一件事：

if the clicked pixel is inside the lightblue circle, print 1.
else if the clicked pixel is inside the gray circle, print 2.
else print 3.

我在函数中构建了这些圆：

circleInArc

此外，我还编写了函数：

$（“#canvas”）.on（'click'，function（event）{..}

和

函数isPointInsideCircle（center_x，center_y，radius，x，y）{..}

在javascript区域中。我在html区域中编写了另一个函数（如

circleInArc

）

请帮帮我

---

感谢您的帮助！

以响应较小圆圈中的点击事件

• 创建蓝色和灰色小圆后，保存它们的x/y坐标和半径信息

• 当鼠标事件发生时，使用pointInside测试查看鼠标是否在任一圆中

演示：

代码可能如下所示：

    // When a circle is created send back its x,y & radius
    // We use this info to later check if the mouse is inside this particular circle

    function circleInArc(fillColor,radianAngle){
        var x=cx+radius*Math.cos(radianAngle);
        var y=cy+radius*Math.sin(radianAngle);
        ctx.beginPath();
        ctx.arc(x,y,linewidth/2,0,Math.PI*2);
        ctx.closePath();
        ctx.fillStyle=fillColor;
        ctx.fill();
        return({x:x,y:y,radius:linewidth/2});
    }


    // save both circles x,y & radius in a javascript object when calling circleInArc

    var circle1=circleInArc("skyblue",PI*1.5);
    var circle2=circleInArc("lightgray",PI*1.25);


    // listen for mousedown events 
    // I use jquery, but you could substitute pure javascript if you prefer

    $("#canvas").mousedown(function(e){handleMouseDown(e);});


    // when a mousedown occurs, test both circles to see if the mouse is inside
    // then put up an alert with the results of the tests

    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // test circle1
      var dx=mouseX-circle1.x;
      var dy=mouseY-circle1.y;
      var rSquared=circle1.radius*circle1.radius;
      if(dx*dx+dy*dy<rSquared){
          alert("Clicked in circle#1");
          return;
      }

      // test circle2
      var dx=mouseX-circle2.x;
      var dy=mouseY-circle2.y;
      var rSquared=circle2.radius*circle2.radius;
      if(dx*dx+dy*dy<rSquared){
          alert("Clicked in circle#2");
          return;
      }

      // otherwise outside circles
      alert("Clicked outside circle#1 and circle#2");

    }

//创建圆时，返回其x、y和半径
//我们使用这个信息来检查鼠标是否在这个特定的圆圈内
函数循环（填充颜色、弧度角）{
var x=cx+半径*数学cos（弧度角）；
变量y=cy+半径*数学sin（辐射角）；
ctx.beginPath（）；
弧（x，y，线宽/2,0，数学π*2）；
ctx.closePath（）；
ctx.fillStyle=fillColor；
ctx.fill（）；
返回（{x:x，y:y，半径：线宽/2}）；
}
//调用CircleInac时，在javascript对象中保存两个圆x、y和半径
var circle1=CircleInAc（“天蓝色”，PI*1.5）；
var circle2=CircleInAc（“浅灰色”，PI*1.25）；
//收听mousedown事件
//我使用jquery，但如果您愿意，可以用纯javascript替代
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
//当鼠标向下移动时，测试两个圆圈，看看鼠标是否在里面
//然后根据测试结果发出警报
功能手柄向下（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（例如clientY-offsetY）；
//测试圈1
var dx=mouseX-circle1.x；
var dy=mouseY-circle1.y；
var rSquared=圆1.半径*圆1.半径；
如果（dx*dx+dy*dyI）我明白了！再次非常感谢！真是个救命恩人！