Javascript 创建单击事件并删除画布中的圆圈重叠

我编写了以下html和javascript代码：

单击画布的坐标时，绘制一个圆。 现在我想在代码中执行这两个操作：

1-创建单击事件，当我单击圆圈时，打开下面的引导下拉菜单：

<div class="dropdown">
  <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
    Dropdown
    <b class="caret"></b>
  </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    ...
  </ul>
</div>

...

---

2-用户无法绘制两个圆圈重叠的圆圈

我已更新了您的脚本以执行您想要的操作。您可能需要进一步更新它。基本上，您需要存储鼠标单击事件，并在创建新圆圈时添加菜单。然后，所有新的点击都会被检查，如果它们在圆圈中，它们会显示菜单，如果它们太近，就会发出警报，如果它们足够远，就会画出一个新的圆圈

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var canvasOffset=$（“#myCanvas”）.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var x；
变量y；
var半径=50；
var startAngle=1.1*Math.PI；
var endAngle=1.9*Math.PI；
var逆时针=假；
var循环=[]；
功能手柄向下（e）{
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（e.clientY-offsetY）；
$（“#downlog”）.html（“Down:“+mouseX+”/“+mouseY”）；
//检查所有现有圆圈，查看是否单击了
var inCircle=假；
var-tooClose=false；
对于（变量i=0；i 0）{
//检查我们是否在圆圈中单击
if（Math.sqrt（（mouseX圆[i].x）*（mouseX圆[i].x）+（mouseY圆[i].y）*（mouseY圆[i].y））
单击我”）；
//存储这些数据
圆.push（{x:mouseX，y:mouseY}）；
}    
}
$（“#myCanvas”）.mousedown（函数（e）{
把手向下（e）；
});

您尝试过什么？要做到这一点，您需要跟踪鼠标单击的原始位置并存储该位置。然后，您需要检查该位置是否落在另一个鼠标单击圆圈内。如果是，则显示菜单，而不是在画布上绘制新的圆圈。如果没有，那么画一个新的圆圈

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

var canvasOffset = $("#myCanvas").offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var x;
var y;
var radius = 50;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;

var circles = [];

function handleMouseDown(e) {
    mouseX = parseInt(e.clientX - offsetX);
    mouseY = parseInt(e.clientY - offsetY);
    $("#downlog").html("Down: " + mouseX + " / " + mouseY);
    //check all existing circles to see if we clicked on
    var inCircle = false;
    var tooClose = false;
    for(var i =0;i<circles.length;i++){
        if(circles.length > 0){
            //checks if we clicked in a circle
            if(Math.sqrt((mouseX-circles[i].x)*(mouseX-circles[i].x) + (mouseY-circles[i].y)*(mouseY-circles[i].y)) < radius+5){
                console.log('in circle');
                inCircle = i;
            }
            //checks if we clicked somewhere that would create an over lapping circle
            else if(Math.sqrt((mouseX-circles[i].x)*(mouseX-circles[i].x) + (mouseY-circles[i].y)*(mouseY-circles[i].y)) < radius*2+5){
                console.log('too close');
                tooClose = true;
            }
        }
    }
    if(inCircle !== false){
        //we clicked in a cirlce launch the menu
        console.log('showing menu');
        $('#circle-menu-'+inCircle).css({left:e.clientX,top:e.clientY});
        $('#circle-menu-'+inCircle).show();
    }
    else if(tooClose){
        alert('Cant create new circle, too close to existing one');
        //hide all shown menus
        $('.dropdown').hide();
    }
    else{
        //hide all shown menus
        $('.dropdown').hide();
        console.log('creating new circle');
        //Draw a new circle  
        context.beginPath();
        context.arc(mouseX, mouseY, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'rgba(255, 255, 255, 0.5)';
        //                context.fillStyle = 'green';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = '#003300';
        context.stroke();

        //build a menu for it
        $('#menus').append($('<div class="dropdown" id="circle-menu-'+circles.length+'"><a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">Dropdown<b class="caret"></b></a><ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"><li>Click Me</li></ul></div>'));


        //store that data
        circles.push({x:mouseX,y:mouseY});
    }    
}


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