Javascript 循环选择所有矩形

Question

每当我单击 canvas 上的单个矩形时，它会清除所有矩形。如何只清除我在 canvas 上单击的矩形？我想问题出在我的代码中的 for 循环，因为它循环遍历了所有矩形。

for(var i = 0; i < rect.length; i++){
    // Check if the x and y coordinates are inside the rectangle
    if(x > rect[i].x && x < rect[i].x + rect[i].width
        && y > rect[i].y && y < rect[i].y + rect[i].height)
    {
        // If true, clear the rectangle
        for(var j = 0; j < rect.length; j++){
            ctx.clearRect(rect[j].x,rect[j].y,rect[j].width,rect[j].height);
        }
    }
}

Answer 1

如果我正确理解了您的代码，那么问题出在您的第二个 for 循环上。找到正确的矩形后，您将再次遍历它们。试试这个：

for(var i = 0; i < rect.length; i++){
    // Check if the x and y coordinates are inside the rectangle
    if(x > rect[i].x && x < rect[i].x + rect[i].width
        && y > rect[i].y && y < rect[i].y + rect[i].height)
    {
        // If true, clear the rectangle
        ctx.clearRect(rect[i].x,rect[i].y,rect[i].width,rect[i].height);
        break; //break out of the for loop since the rect was found
    }
}

Javascript 循环选择所有矩形

Javascript loop selects all rectangles

javascript

canvas