Javascript 从画布上擦除图像

我正在尝试为Image类编写onclick函数，这样当您单击图像时，它将执行一个操作

Image.prototype.onClick = function(x, y, w, h, id) {        
    window.addEventListener("mousedown", function(){
        if(mouseX >= parseInt(x) && mouseX <= parseInt(x) + parseInt(w) &&
            mouseY >= parseInt(y) && mouseY <= parseInt(y) + parseInt(h)) {

            console.log(id + ", " + x + ", " + y + ", " + w + ", " + h + ", " + mouseX + ", " + mouseY);
        }
    }, false);
}

所以我现在的问题是点击成功，但是它会在同一个图像上循环，这取决于它被画了多少次

---

因此，基本上，每当函数循环时都会绘制图像，我需要一种从画布上销毁图像的方法，而不是用一个空白的白色矩形绘制图像。

计时器的每次迭代都会清除画布并调用图像（我猜如果在图像内部单击，会询问它们），从而**将**EventListener添加到mouseDown，所以当你按下鼠标时，图像上会有很多触发器，它们都会触发

我认为您的意思是在一个触发器上捕获鼠标向下，然后在一个循环中对所有图像进行检查，而不是在每一帧将触发器附加到每个对象

无法在画布上拾取要擦除的对象。与MS Paint非常相似，一旦绘制出像素，它们就只是与它们所属的内容无关的像素。

---

除非您了解有关渲染顺序、层和alpha的特定规则，否则在每一帧中重新绘制所有对象要简单得多。

调用的主要方法是什么时候/哪里？在setInterval函数中

function main() {
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(0, 0, 640, 480);

    for(var obj in value) { 
        sprite.onClick(value[obj].X, value[obj].Y, 32, 32, value[obj].Id);
    }
}