Javascript 仅删除单击的元素，而不删除画布上的其他元素

我不熟悉编码。当前正在为学校项目创建游戏

简而言之，随机圆圈或“目标”将在屏幕上弹出，用户必须单击它们。我试图制作一些东西，在没有点击圆圈的情况下创建一个新画布，但是它创建了一个空画布，循环再次进行。如何在新画布上保留“未点击”的圆圈

如果没有意义，我很抱歉：D。如果你有任何建议，如果你能帮我把它说出来，我将不胜感激。D。任何帮助都将不胜感激

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var radiustracker=[]；
var xpos=[]；
var ypos=[]；
变异半径；
var x；
变量y；
var color='蓝色'；
ctx.fillStyle='lightblue'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
函数随机化（）{
半径=数学地板（数学随机（）*25）+10；
x=数学地板（数学随机（）*600）+50；
y=Math.floor（Math.random（）*400）+50；
radiustracker.push（半径）；
xpos.push（x）；
推压（y）；
拉深圆（x，y，半径）；
}
函数绘图圆（x、y、半径）{
ctx.beginPath（）；
弧（x，y，半径，0，2*Math.PI）；
ctx.closePath（）；
ctx.fillStyle=颜色；
ctx.fill（）；
}
函数clickCircle（XMU、ymus）{
对于（var i=0；i{
const rect=canvas.getBoundingClientRect（）；
const x=event.clientX-rect.left；
const y=event.clientY-rect.top；
点击圆圈（x，y）；
});
#画布{
显示：内联；
利润率：汽车；
}
我不需要三个单独的数组来跟踪圆x、y和r，而是使用如下对象数组：

var circlesdraw=[]；
//然后对你画的每个圆重复以下步骤
圆形推({
x:x，
y:y，
r:r
});

至少通过这种方式，您的数据被分组在一起并具有某种意义

第二，如果我理解正确，你想做的是删除一个被点击的圆圈。在JS画布中，您无法删除绘制的内容，只能使用clearRect，因此我们应该使用它，因为它是一种比尝试用另一个清晰的圆绘制圆更快的方法

我的想法是首先清除画布，然后绘制
圆圈
数组中的任何圆圈，然后当用户单击时，可以执行相同的操作，除了从圆圈数组中删除单击的圆圈（可以过滤掉与x、y和r匹配的元素）

除此之外，您还可以在新的圆圈中绘制间隔

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var循环=[]；
函数drawCanvas（）{
ctx.fillStyle='lightblue'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
对于（var a=0；a{
const rect=canvas.getBoundingClientRect（）；
const x=event.clientX-rect.left；
const y=event.clientY-rect.top；
点击圆圈（x，y）；
});
函数随机化（）{
变量半径=数学地板（数学随机（）*25）+10；
var x=数学地板（数学随机（）*600）+50；
变量y=数学地板（数学随机（）*400）+50；
推({
x:x，
y:y，
r：半径
});
拉深圆（x，y，半径）；
}
var区间=设定区间（随机，1000）；

我帮了你清理了一些代码什么的

它的工作方式是，您需要单独调用drawCanvas一次，因为您有0个圆圈要开始，它将绘制所有0个圆圈并设置画布。然后你注册当你点击一个圆时会发生什么，然后你设置间隔开始每秒画一个新的圆，希望这样做不会太复杂。我测试了一下，它对我来说非常适合
 删除一个圆时，必须重新绘制所有圆，这是没有办法的。我所做的更改非常简单，在
clickCircle
中，我清除整个画布，然后在所有圆圈中循环，删除所有单击的圆圈，并绘制所有未单击的圆圈


//提示：不要使用var，它会导致奇怪的行为。使用const和let代替。
const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
//提示：使用单个数组而不是半径和位置数组
常数圆=[]；
常量颜色='蓝色'；
ctx.fillStyle='lightblue'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
函数随机化（）{
//提示：缩小变量的范围，在radius、x和y是全局变量之前，现在它们只存在于函数内部
常数半径=数学楼层（数学随机（）*25）+10；
常数x=Math.fl