Canvas 在画布上重画相同的图像

我在下国际象棋。我目前的想法是在移动一块后，我将重新绘制所有的板（现在可能不好）

我有一个重画图像的问题，一张图片只画一次在第一次，从来没有重画

这是我的

drawPiece（）

函数：

drawPieces() {
        const ctx = this.canvas.getContext('2d');
        const piecesOnBoard = this.boardStatus.split("_");
        for (let key in this.images) {
            const image = this.images[key];
            image[1].onload = function () {
                for (let i = 0; i < piecesOnBoard.length; i++) {
                    let x = piecesOnBoard[i].charAt(0);
                    let y = piecesOnBoard[i].charAt(1);
                    let piece = piecesOnBoard[i].substring(2);
                    if (image[0] === piece) {
                        ctx.drawImage(image[1], (Canvas.CELL_SIZE + 1) * y + 1, (Canvas.CELL_SIZE + 1) * x + 1, Canvas.CELL_SIZE, Canvas.CELL_SIZE);
                        console.log("draw " + image[1] + 'done');
                    }
                }
            }
        }
    }

我有两个问题：

如何重新绘制相同的图像（解决我的问题）

什么解决方案比我目前的解决方案更能提高性能

---

谢谢你的帮助

除非您更改

src

将函数更改为下面代码段中的内容

您已经使用了一些老式的模式，一些关于代码的指针

• 使用。不要使用
• 通过括号表示法访问字符串中的字符。例如

  str[idx]

  而不是

  str.charAt（idx）

• 使用而不是

一小条

---

谢谢你的提示，我是JavaScript新手。我以前从未编写过JavaScript。更重要的是，你有解决我问题的方法吗？@Puskin从你问题中的信息来看，这个答案确实解决了你的问题哦，我有了，非常感谢。我以为你只是在没有解决方案的情况下为我改进了代码。对不起，非常感谢。一个问题。我看到画布上的教程，它说确保在绘制之前加载照片。这就是我使用onload（）回调的原因。对于第二个问题，有什么解决方案比我现在的解决方案更能提高性能呢？。只需移动一块，不需要重新绘制所有canvas@Puskin使用一个函数在开始时加载所有图像。对于加载的每个图像，增加一个计数器，对于每个加载事件，减少该计数器。当在加载事件中，计数器变为0时，则所有图像都已加载，您可以开始游戏。您还必须侦听错误事件。如果有错误，那么计数器将不会达到0，在这种情况下，该怎么办取决于您。就性能而言，你可以做很多事情。答案已经稍微提高了性能。提高性能的最佳方法是实验。您没有提供足够的信息来进一步提高性能

ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);// clear all canvas
board.drawBlankBoard();                                      // redraw blank board - This working
board.drawPieces();                                          // redraw piece image - this NOT working

const ctx = this.canvas.getContext('2d'); // do once 


drawPieces() {  
    const C_SIZE = Canvas.CELL_SIZE;
    const status = this.boardStatus.split("_");
    for (const image of Object.values(this.images)) {
        for (const pieceOnBoard of status) {
            if (image[0] === pieceOnBoard.slice(2)) {
                const x = pieceOnBoard[0] * (C_SIZE + 1) + 1;
                const y = pieceOnBoard[1] * (C_SIZE + 1) + 1;
                ctx.drawImage(image[1], y, x, C_SIZE, C_SIZE);
            }
        }
    }
},