从Canvas擦除图像

Question

我正在尝试将一个onclick函数写入Image类，因此当您单击该图像时，它将执行一个操作。

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);
}

然后我有了绘制的主要方法：

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);
    }
}

所以我目前遇到的问题是点击成功，但是它根据绘制的次数在同一图像上循环。

所以基本上每当函数循环时都会绘制图像，我需要一种方法来从画布中摧毁图像，而不是用空白的白色矩形绘制它。

Answer 1

你的计时器的每次迭代它都会清除画布并调用图像（我猜你是否在里面点击它们），**将**事件添加到mouseDown，所以当你按下鼠标按下鼠标时图像将附加许多触发器，它们都会触发。

我认为你的意思是在一个触发器上捕获mouseDown然后检查循环中的所有图像 - 不是每帧都将触发器附加到每个对象。

无法在画布上选择要擦除的对象。就像在MS Paint中一样，一旦绘制了像素，它们就只是与它们所属的无关的像素 除非你知道关于渲染顺序，图层和alpha的一些特定规则，否则每帧重绘所有对象要简单得多。