@Tim308

Как сделать отрисовку с фиксированным fps?

Всем привет. У меня есть два канваса на которых я рисую графики с помощью Chart.js. Отрисовка в реальном времени т.е. обновляю графики по setInterval(). Появилась такая проблема: если данные для одно из графиков кончились, другой график начинает отрисовываться быстрее. Пробовал setInterval() заменить на requestAnimationFrame() - эффект такой же.
  • Вопрос задан
  • 60 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
с requestAnimationFrame вы же опираетесь на время, прошедшее с начала отсчёта, для того, чтобы рисовать что должно появиться по времени «сейчас», а не раньше или позже.
В примере тут есть.

Надо исходить не из того, что вызовы функции будут точно раз-в-X-ms – нет. Но будет известно точное время, прошедшее с некого начала отсчёта, который должен быть общим для обоих графиков.

По таймеру, например, вы делали
let x = 0;
const onTimerTick = () => {x = x + 1} // по 1 px за «кадр»

С requestAnimationFrame нужна функция от времени:
let start;
const step = (timestamp) => { // float время в ms с загрузки страницы
  if (!start) start = timestamp;
  const progress = timestamp - start;
  
  x = x + progress * 0.001; // надо как-то посчитать скорость в пикселях за миллисекунду

  if (progress < 2000) {
    window.requestAnimationFrame(step);
  }
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы