Холст заикание - PullRequest
Новая
       6

Холст заикание

0 голосов
/ 05 мая 2020

Следующий пример работает без проблем на windows: https://jsfiddle.net/cfgdavLw/6/

HTML: 

<canvas id="canvas" width="640" height="480" />

JS: 

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var previousTimestamp;

var x = 0;
var y = 0;

function draw(timestamp) {

    requestAnimationFrame(draw);

  let delta = 0;

  if (previousTimestamp) {
    delta = (timestamp - previousTimestamp) / 1000;
  }

  previousTimestamp = timestamp;

  x += 120 * delta;

  if (x > canvas.width - 32) {
    x = 0;
  }

  context.clearRect(0, 0, canvas.width, canvas.height);

  context.fillStyle = "red";
  context.fillRect(x, y, 32, 32);
}

requestAnimationFrame(draw);

Но когда я открываю его на своем ноутбуке (с Ubuntu), это уже не гладко. Он начинает мерцать (как будто иногда перестает двигаться на долю секунды), хотя сохраняет FPS на уровне 60. Это похоже на действительно простую анимацию ...

Кто-нибудь знает, как это могло произойти или как я могу исправить это?

У меня Probook с установленной Ubuntu:

  • Ubuntu 18.04.4 LTS
  • Процессор: Intel® Core ™ i5-8250U CPU @ 1.60GHz × 8
  • Графика Intel® UHD Graphics 620 (Kabylake GT2)

Изменить :

Скриншот вкладки производительности: Performance tab

...