Wie mache ich eine Zeichnung rückgängig? Eine Stoppuhr zu machen und der Text überlappt, wenn es aktualisiert

Question

Ich mache eine Stoppuhr, die funktioniert, aber wenn es sich ändert, überschneidet sich der Text selbst, weil es den Text wiederholt zeichnet. Wenn ich strokeText und fillText aus dem Intervall entferne, ändert es sich nicht. Es bleibt gleich. Wie kann ich die Funktion rückgängig machen lassen oder den Text zu Beginn des Intervalls löschen?

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

-Code Erklärung: gameTimeSeconds die Sekunden auf der rechten Seite des Kolons ist, ist nur wenige Minuten auf der linken Seite, und sein zu sagen, ob die Sekunden nicht zweistellig ist, dann auf der linken Seite davon die Null zeigen. Es sagt auch, dass man eine Minute hinzufügt, wenn die Sekunden 60 erreichen. Dann schreibe die Zeit. Ex: 0:01, 0:20, 1:20 usw. Vielen Dank!

Answer 1

Ich nehme an, Sie nur Ihre Leinwand auf jedem Intervall löschen müssen: context.clearRect(0, 0, canvas.width, canvas.height);

Answer 2

Sie müssen jede ‚Schicht‘ für alles, was für jeden Rahmen zeichnen, die sich überlappen könnten. Zum Beispiel, zeichnen Sie die Rückseite der Stoppuhr, dann die Text auf jedem Rahmen.

I.E. was auch immer zeichnet den Text und Hintergrund muss innerhalb von addTime passieren