我希望能夠將鼠標懸停在不同的矩形上，并使矩形在懸停時改變顏色，我現在適用于最后一個矩形，但其他矩形被清除。這些矩形是使用類/構造函數、數組和循環創建的。代碼如下：/*Variables*/let canvas = document.querySelector('#canvas'),    ctx = canvas.getContext('2d'),    square;/*Board Class*/class Board {    constructor(startX, startY, height, width, angle) {      this.startX = startX;      this.startY = startY;      this.height = height;      this.width = width;      this.angle = angle;    }      drawBoard() {        let canvasWidth = window.innerWidth * .95,            drawWidth = canvasWidth * this.width,            drawHeight = canvasWidth * this.height,            drawStartX = canvasWidth * this.startX,            drawStartY = canvasWidth * this.startY;                square = new Path2D();        ctx.rotate(this.angle * Math.PI / 180);        square.rect(drawStartX, drawStartY, drawHeight, drawWidth);        ctx.fillStyle = 'red';        ctx.fill(square);      }  }/*Event Listener for changing rectangle color and redrawing*/  canvas.addEventListener('mousemove', function(event) {    if (ctx.isPointInPath(square, event.offsetX, event.offsetY)) {      ctx.fillStyle = 'white';     }    else {      ctx.fillStyle = 'red';      }      ctx.clearRect(0, 0, canvas.width, canvas.height);    ctx.fill(square);  });  /*Instantiate Array*/  let b = [];  /*Loop to create boards and push to array*/  for(let i = 1; i < 11; i++){    b.push(new Board(.05 * i, .25, .04, .03, 0));    }/*Function to loop through array and draw boards when page loads*/function loadFunctions(){    background.draw();    b.forEach(function(board){        board.drawBoard();    })}這是我使用 Canvas API 的第一個項目，它給我帶來了很多麻煩，通常我可以通過類/id 來識別形狀（如果它是用常規 HTML 元素制作的），但我不知道從這里該去哪里。 。我嘗試循環遍歷包含主板信息的數組，但無法讓任何東西起作用。任何幫助表示贊賞！