Почему clearRect не работает на html5 canvas

Question

Я попробовал простую анимацию текста на холсте. Однако он не очищает холст, когда я снова нажимаю анимацию. Функция clearRect () не работает должным образом.

вот код:

document.getElementById('click').onclick = function() {

 var startTime = new Date().getTime();
 var interval = setInterval(function() {
    if (new Date().getTime() - startTime > 2000) {
      clearInterval(interval);
    }
    ctx.clearRect(0, 0, canvas.width, canvas.width);

    animateText();
  }, 33);

}

Вот скрипка

Должен анимироваться с начала (первого экземпляра) каждый раз, когда я нажимаю кнопку анимации.

Answer 1

Ваш экран очищается , просто вы не сбросили никакое значение, например distance и speed. Также имейте в виду, что вы создаете новый interval каждый раз, когда нажимаете кнопку (поскольку вы используете var).

Итак, вам нужно будет сбрасывать значения при каждом нажатии, и удалить var.

Кроме того, ваш clearInterval(interval);, кажется, немного задерживается ... Так что попробуйте каждый клик кнопки.

document.getElementById('click').onclick = function() {

 var startTime = new Date().getTime();
 clearInterval(interval); //clearinterval
 distance = 0; //reset values
 speed = 15; //reset values
 interval = setInterval(function() {
    if (new Date().getTime() - startTime > 2000) {
      clearInterval(interval);
    }
    ctx.clearRect(0, 0, canvas.width, canvas.width);

    animateText();
  }, 33);

}