如何撤消绘图?制作秒表，文本在更新时重叠

Question

我正在制作一个可以工作的秒表，但是当它发生变化时，文本会重叠，因为它会重复绘制文本。如果我从间隔中删除笔画文本和填充文本，那么它不会改变。它保持不变。如何使函数撤消自身，或删除间隔开头的文本？

function drawTimer() {
    var fontSize = 15;
    graph.lineWidth = playerConfig.textBorderSize;
    graph.fillStyle = playerConfig.textColor;
    graph.strokeStyle = playerConfig.textBorder;
    graph.miterLimit = 1;
    graph.lineJoin = 'round';
    graph.textAlign = 'right';
    graph.textBaseline = 'middle';
    graph.font = 'bold ' + fontSize + 'px sans-serif';
    var gameTimeMinutes = 0;
    var gameTimeSeconds = 1;
    var gameTime = "";
    function addTime() {
        gameTimeSeconds += 1;
        if (gameTimeSeconds < 10) {
            gameTime = gameTimeMinutes + " : 0" + gameTimeSeconds;
        } else {
            gameTime = gameTimeMinutes + " : " + gameTimeSeconds;
        }
        if (gameTimeSeconds == 60) {
            gameTimeSeconds = 0;
            gameTimeMinutes++;
        }
        graph.strokeText(gameTime, 50, 50);
        graph.fillText(gameTime, 50, 50);
    }
setInterval(addTime, 1000);
}

代码说明：gameTimeSeconds是冒号右边的秒，分钟在左边，它说如果秒不是两位数，那么在它的左边显示零。它还说当秒达到 60 时将 1 加到分钟。然后，写下时间。例如：0：01、0：20、1：20等。谢谢！

Answer 1

我假设你只需要在每个间隔上清除画布：context.clearRect(0, 0, canvas.width, canvas.height);

Answer 2

您需要在

每一帧中为可能重叠的任何内容绘制每个"图层"。例如，绘制秒表的背面，然后绘制每一帧上的文本。

即，无论绘制文本和背景什么，都需要在addTime内部进行