Javascript 在画布上删除

我试图在事件中创建和删除弧，添加部分工作正常，我将它们保存在数组中，这样我可以在调用事件侦听器时删除它们，但不知何故，这并没有发生。我的意思是，它在控制台中工作正常，因为在数组中，由于它在画布中没有更新，所以数组值会减少 代码：

var myCanvas=document.getElementById（“myCanvas”）；
myCanvas.width=window.innerWidth；
myCanvas.height=500；
var c=myCanvas.getContext（“2d”）；
var myArr=[]；
myCanvas.addEventListener（“单击”，函数（）{
var x=事件x；
var y=事件y；
var半径=10；
myArr.push（新创建的圆（x，y，半径，#34495e））；
console.log（myArr）；
});
addEventListener（'keydown'，function（）{
myArr.拼接（0,1）；
console.log（myArr）；
});
函数CreateCircle（x、y、半径、颜色）{
这个.x=x；
这个。y=y；
这个半径=半径；
这个颜色=颜色；
this.draw=函数（）{
c、 beginPath（）；
c、 弧（this.x，this.y，this.radius，0，Math.PI*2）；
c、 fillStyle=this.color；
c、 填充（）；
}
这个.draw（）；
}

---

我是否需要在构造函数中添加一个delete函数并在keydown事件中调用它，我如何继续执行/修复它？

您不需要在任何地方更新画布。您需要创建某种“渲染”函数，该函数将清除先前渲染的帧，然后在数组中的圆中循环并调用。在所有这些圆上绘制

提示：

---

context.clearRect方法用于清除画布。

您不需要在任何地方更新画布。您需要创建某种“渲染”函数，该函数将清除先前渲染的帧，然后在数组中的圆中循环并调用。在所有这些圆上绘制

提示：

---

context.clearRect方法可用于清除画布。

要删除圆圈，必须清除画布，然后使用修改后的圆圈数组重新绘制

首先，从

CreateCircle

方法返回一个对象，这样您就可以使用它了。这里不需要实例

其次，可以通过重置画布的宽度来清除画布，然后根据数组重新绘制，如下所示

var myCanvas=document.getElementById（“myCanvas”）；
myCanvas.width=window.innerWidth；
myCanvas.height=500；
var c=myCanvas.getContext（“2d”）；
var myArr=[]；
myCanvas.addEventListener（“单击”，函数（）{
var x=事件x；
var y=事件y；
var半径=10；
myArr.push（创建圆（x，y，半径，#34495e））；
});
addEventListener（'keydown'，function（）{
myArr.拼接（0,1）；
myCanvas.width=myCanvas.width；
myArr.forEach（函数（圆）{
CreateCircle（circle.x，circle.y，circle.r，circle.c）
})
});
函数CreateCircle（x、y、半径、颜色）{
c、 beginPath（）；
c、 圆弧（x，y，半径，0，数学PI*2）；
c、 填充样式=颜色；
c、 填充（）；
返回{x:x，y:y，r:radius，c:color}；
}

---

要删除圆圈，必须清除画布，然后使用修改后的圆圈数组重新绘制

首先，从

CreateCircle

方法返回一个对象，这样您就可以使用它了。这里不需要实例

其次，可以通过重置画布的宽度来清除画布，然后根据数组重新绘制，如下所示

var myCanvas=document.getElementById（“myCanvas”）；
myCanvas.width=window.innerWidth；
myCanvas.height=500；
var c=myCanvas.getContext（“2d”）；
var myArr=[]；
myCanvas.addEventListener（“单击”，函数（）{
var x=事件x；
var y=事件y；
var半径=10；
myArr.push（创建圆（x，y，半径，#34495e））；
});
addEventListener（'keydown'，function（）{
myArr.拼接（0,1）；
myCanvas.width=myCanvas.width；
myArr.forEach（函数（圆）{
CreateCircle（circle.x，circle.y，circle.r，circle.c）
})
});
函数CreateCircle（x、y、半径、颜色）{
c、 beginPath（）；
c、 圆弧（x，y，半径，0，数学PI*2）；
c、 填充样式=颜色；
c、 填充（）；
返回{x:x，y:y，r:radius，c:color}；
}

---

如果是键控处理程序，在这里拼接阵列，则永远不会更新画布，这需要完全重画才能更新完全重画才能更新？我不明白？像刷新功能一样？如果你想从画布上删除一些东西，你必须重新绘制整个画布，而不包括这些部分。有很多方法可以清除画布的一部分，但通常只需要通过更新来重新绘制整个画布。好的，你能建议我怎么做吗？如果是键控处理程序，你在拼接数组，你永远不会更新画布，这需要一个完整的重画来更新一个完整的重画来更新吗？我不明白？像刷新功能一样？如果你想从画布上删除一些东西，你必须重新绘制整个画布，而不包括这些部分。有很多方法可以清除画布的一部分，但通常情况下，只需通过更新来重新绘制整个画布。好的，你能建议我怎么做吗？你能就我的几个问题m指导我吗？你能就我的几个问题m指导我吗？

   <script>
    var myCanvas = document.getElementById("myCanvas");
    myCanvas.width = window.innerWidth;
    myCanvas.height = 500;
    var c = myCanvas.getContext("2d");
    var myArr = [];

    myCanvas.addEventListener("click", function(){    
        var x = event.x;
        var y = event.y;
        var radius = 10;
        myArr.push(new CreateCircle(x, y, radius, "#34495e"));
        console.log( myArr );

    });

    window.addEventListener('keydown', function(){
        myArr.splice(0,1);
        console.log(myArr);
    });

    function CreateCircle(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;

        this.draw = function() {
            c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI*2);
            c.fillStyle = this.color;
            c.fill();
        }
        this.draw();
    }


</script>