当用户使用Javascript在屏幕上拖动鼠标创建多个圆时，如何删除特定的圆

我使用画布创建了圆圈，但双击时无法删除相同的圆圈`

var画布，
背景，形状，
拖动=false，拖动=false，
dragStartLocation，dragEndLocation，
快照
numShapes变种；
函数初始化（）{
numShapes=100；
形状=[]；
canvas=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
canvas.addEventListener（'mousedown'，dragStart，false）；
canvas.addEventListener（'mousemove'，drag，false）；
canvas.addEventListener（'mouseup'，dragStop，false）；
addEventListener（'dblclick'，dblclickerase）；
}
函数dblclickerase（evt）
{
var i；
//我们要注意对象的分层顺序，这样，如果鼠标落在多个对象上，
//只会拖动最上面的一个。
var highestIndex=-1；
//正确获取鼠标位置，注意调整浏览器中可能出现的大小：
var bRect=canvas.getBoundingClientRect（）；
mouseX=（evt.clientX-bRect.left）*（canvas.width/bRect.width）；
鼠标=（evt.clientY-bRect.top）*（canvas.height/bRect.height）；
//查找单击的形状
对于（i=0；i高指数）{
//在这里，我想双击删除圆，但没有得到逻辑，我可以得到鼠标位置，但如何选择圆和删除它
}
}
}
}
函数getCanvasCoordinates（事件）{
var x=event.clientX-canvas.getBoundingClientRect（）.left，
y=event.clientY-canvas.getBoundingClientRect（）.top；
返回{
x:x，
y:y
};
}
函数takeSnapshot（）{
snapshot=context.getImageData（0，0，canvas.width，canvas.height）；
}
函数restoreSnapshot（）{
putImageData（快照，0,0）；
}
功能图（位置）{
变量半径=Math.sqrt（Math.pow（（dragStartLocation.x-position.x），2）+Math.pow（（dragStartLocation.y-position.y），2））；
var i=0；
var tempX；
var tempY；
var tempRad；
var-tempR；
var tempG；
var tempB；
颜色；
tempRad=半径；
tempX=dragStartLocation.x；
tempY=dragStartLocation.y；
tempColor=getRndColor（）；
tempShape={x:tempX，y:tempY，rad:tempRad，color:tempColor}；
形状。推（tempShape）；
context.beginPath（）；
arc（tempX，tempY，tempRad，0，2*Math.PI，false）；
//closePath（）；
context.fillStyle=tempColor；
context.fill（）；
i++；
}
函数dragStart（evt）{
拖动=真；
//如果（拖动==true）{
dragStartLocation=getCanvasCoordinates（evt）；
takeSnapshot（）；
//}
}
功能hitTest（形状、mx、my）{
var-dx；
变量dy；
dx=mx-shape.x；
dy=my-shape.y；
//如果距离中心的距离小于圆形物体的半径，则会记录“命中”
返回（dx*dx+dy*dy

重置

你不能像那样删除你在画布上画的东西。一旦画在画布上，它就停留在那里，除了读取像素数据，你没有办法访问它-但这不会解决你的问题，因为你可以有相同颜色的重叠圆

要解决此问题，必须跟踪绘制的圆，并在每次需要时重新绘制整个画布（添加新圆、删除旧圆等）。这样，当您想要删除一个圆时，只需将其从圆列表中删除（一个简单的数组就可以了）。但重要的是，您需要清除并重新绘制整个画布

---

小结：当画布不断重画时（无论是在每个刻度上还是在用户交互发生时），单击“n”拖动功能只应将圆添加到圆列表中（指定x、y、半径、颜色等数据），而双击圆将在列表中查找该圆，然后将其删除。

表示您试图说我需要通过清除旧画布（我双击的圆圈），然后再次用剩余的画布重置新画布来创建新画布？没有任何可能只修复此代码。谢谢@Shomz和我刚才想的另一个问题，如果要将一个圆从一个位置拖到另一个位置，那么我应该遵循哪些步骤。？修复当前代码将非常困难，因为在画布上绘制某个东西之后，除了读取像素值之外，你再也不能访问它了。因此，为了修复你的代码，你必须想出一个在像素级工作的圆识别工具，处理重叠的圆会非常困难。欢迎你。对于你的第二个评论：这将很容易与我的方法从上面：你可以从列表中识别点击的圆圈，只需在拖动时更改其

x

和

y

参数。哦，这是我对canvas的一个老答案，它没有你想要构建的拖放功能，但是它使用拖放来“启动”这些球：看看这些代码是否对你有帮助。