只删除点击的元素，不删除 canvas 上的其他元素

Question

我是编码新手。 目前正在为学校项目创建游戏。

简而言之，屏幕上会弹出随机的圆圈或“目标”，用户必须点击它们。 我试图做一些东西来创建一个没有点击圆圈的新 canvas，但它会创建一个空的 canvas 并且循环再次进行。 如何在我的新 canvas 上保留“未点击”圆圈？

如果这没有意义，我很抱歉：D。 如果您有任何提示，我将不胜感激，如果你能把它简化为我：D。 任何帮助将不胜感激。

 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var radiustracker = []; var xpos = []; var ypos = []; var radius; var x; var y; var color = 'blue'; ctx.fillStyle = 'lightblue'; ctx.fillRect(0, 0, canvas.width, canvas.height); function randomize() { radius = Math.floor(Math.random() * 25) + 10; x = Math.floor(Math.random() * 600) + 50; y = Math.floor(Math.random() * 400) + 50; radiustracker.push(radius); xpos.push(x); ypos.push(y); drawCircle(x, y, radius); } function drawCircle(x, y, radius) { ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI); ctx.closePath(); ctx.fillStyle = color; ctx.fill(); } function clickCircle(xmus, ymus) { for (var i = 0; i < xpos.length; i++) { var distance = Math.sqrt( ((xmus - xpos[i]) * (xmus - xpos[i])) + ((ymus - ypos[i]) * (ymus - ypos[i])) ); console.log(distance); if (distance < radiustracker[i]) { radiustracker[i] = 0; ctx.fillStyle = 'lightblue'; ctx.fillRect(0, 0, canvas.width, canvas.height); } } } var intervall = setInterval(randomize, 1000); canvas.addEventListener('click', (event) => { const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; clickCircle(x, y); });

 #canvas { display:inline; margins:auto; }

 <body> <canvas id="canvas" height="500" width="700" ></canvas> </body>

Answer 1

我不会使用三个单独的 arrays 来跟踪圆 x、y 和 r，而是使用如下对象数组：

var circlesDrawn = [];
//And then the following repeated for each circle you draw
circlesDrawn.push({
    x: x,
    y: y,
    r: r
});

至少这样你的数据就被组合在一起并且具有一定的意义。

其次，如果我正确理解了这个问题，你想要做的是删除一个被点击的圆圈。 在 JS Canvas 中，您不能删除绘制的内容，只能清除矩形，因此我们应该利用它来发挥我们的优势，因为无论如何它是一种比尝试用另一个清晰的圆圈在圆圈上绘画更快的方法

我的想法是首先清除 canvas，然后在circles数组中绘制任何圆圈，然后当用户单击时，您可以做同样的事情，期望从您的圆数组中删除单击的圆圈（您可以过滤掉匹配 x、y 和 r 的元素）

除了所有这些，您还可以在一个新的圆圈中绘制间隔

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

var circles = [];
function drawCanvas() {
    ctx.fillStyle = 'lightblue';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    for (var a = 0; a < circles.length; a++) {
        drawCircle(circles[a].x, circles[a].y, circles[a].r);
    }
}
function drawCircle(x, y, radius){
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.closePath();
    ctx.fillStyle = color;
    ctx.fill();
}
function clickCircle(xmus, ymus){
    for (var i = 0; i < circles.length; i++) {            
        var distance = Math.sqrt(
            Math.pow(xmus - circles[i].x, 2)
            + 
            Math.pow(ymus - circles[i].y, 2)
        );
       console.log(distance);
       if(distance < circles[i].r){   
           //Remove the circle from our array
            circles.splice(i, 1); //This removes 1 element from our circles array at index i
           //Then redraw our canvas from the beginning
           drawCanvas();
        }
    }
}

canvas.addEventListener('click', (event) => {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    clickCircle(x,y);
});

function randomize(){
    var radius = Math.floor(Math.random()*25)+10;
    var x = Math.floor(Math.random()*600)+50;
    var y = Math.floor(Math.random()*400)+50;
    circles.push({
        x: x,
        y: y,
        r: radius
    });
    drawCircle(x,y,radius);
}

var interval = setInterval(randomize, 1000);

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

它的工作方式是你需要自己调用一次drawCanvas，因为你有0个圆圈开始，它会绘制所有0个圆圈并设置你的canvas。 然后你注册当你点击一个圆圈时会发生什么，然后你设置间隔以每秒开始绘制一个新的圆圈，希望这可行并且不会太复杂。 我测试了它，它非常适合我！

Answer 2

删除一个圆圈时，您必须重新绘制所有圆圈，这是没有办法的。 我所做的更改非常简单，在clickCircle中我清除了整个 canvas 然后循环遍历所有圆圈，删除所有被点击的圆圈并绘制所有未点击的圆圈。

 // Tip: don't use var, it can lead to strange behavoir. Use const and let instead. const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // Tip: Use single array instead of radius and position arrays const circles = []; const color = 'blue'; ctx.fillStyle = 'lightblue'; ctx.fillRect(0, 0, canvas.width, canvas.height); function randomize() { //Tip: Reduce the scope of variables, before radius, x and y were global, now they only exist inside the function const radius = Math.floor(Math.random() * 25) + 10; const x = Math.floor(Math.random() * 600) + 50; const y = Math.floor(Math.random() * 400) + 50; const circle = {radius: radius, x: x, y: y} circles.push(circle) drawCircle(circle) } function drawCircle(circle) { ctx.beginPath(); ctx.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI); ctx.closePath(); ctx.fillStyle = color; ctx.fill(); } function clickCircle(xmus, ymus) { // Clear canvas ctx.fillStyle = 'lightblue'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Need to loop backwards since we are removing elements while looping // See https://stackoverflow.com/q/9882284/7448536 for (let i = circles.length - 1; i >= 0; i--) { const circle = circles[i] const distance = // Tip: Use ** for exponents Math.sqrt( ((xmus - circle.x) ** 2) + ((ymus - circle.y) ** 2) ); if (distance < circle.radius) { // Array.splice(index, count) to remove item from array circles.splice(circles.indexOf(circle), 1); } else { // Redraw all circles that were not clicked drawCircle(circle); } } } const intervall = setInterval(randomize, 1000); canvas.addEventListener('click', (event) => { const rect = canvas.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; clickCircle(x, y); });

 #canvas { display:inline; margins:auto; }

 <body> <canvas id="canvas" height="500" width="700" ></canvas> </body>