그림을 실행 취소하는 방법은 무엇입니까? 스톱워치와 텍스트가 업데이트 될 때 겹치기 만들기

Question

나는 작동중인 스톱워치를 만들고 있지만 변경하면 텍스트를 반복해서 그리기 때문에 텍스트 자체가 겹칩니다. 간격에서 strokeText 및 fillText를 제거하면 변경되지 않습니다. 그것은 동일하게 유지됩니다. 나는 어떻게 함수 자체를 실행 취소하거나, 간격의 시작 부분에 텍스트를 삭제할 수 있습니까?

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

당신은 각각의 '레이어'중복 수 아무것도 모든 프레임을 그릴 필요가있다. 예를 들어 스톱워치의 뒷면을 그린 다음 각 프레임의 텍스트를 그립니다.

I.E. 무엇이든간에 텍스트와 배경을 addTime 내부에서 수행해야합니다.