javascript - requestAnimationFrame 使 Canvas 动画出现问题

Question

我正在尝试创建简单的 Canvas 动画，其中小球绕着大球运行。我正在使用 requestAnimationFrame 但它并没有像我一样工作。换句话说，我的动画有时运行得很慢(跟不上 60fps)。我做了jsFiddle以获得更多视觉解释。

这也是我正在使用的 JavaScript:

var layer1 = document.getElementById('layer1').getContext('2d');
var layer2 = document.getElementById('layer2').getContext('2d');

var x;
var y;
var angle = 0;

var last_frame = 0;

function render(timestamp) {

  requestAnimationFrame(render);

  fps = timestamp - last_frame;
  last_frame = timestamp;

  // optimal framerate would be 60 (~16ms/"loop") -> count ratio according to that
  // for example if fps is 32 -> 32/16 = 2 -> we move ball twice the normal distance
  var delta = fps / 16;

  angle += 0.02 * delta;

  x = 200 + 100 * Math.cos(angle);
  y = 200 + 100 * Math.sin(angle);

  layer1.clearRect(0, 0, 400, 400);

  layer1.beginPath();
  layer1.arc(x, y, 20, 0, Math.PI * 2);
  layer1.fill();

}
render(16);

layer2.beginPath();
layer2.arc(200, 200, 80, 0, Math.PI * 2);
layer2.fill();

我的代码有问题还是什么？我正在尝试使用 Cordova (PhoneGap) 和 canvas 制作一款混合手机游戏，但如果 Javascript 的性能这么糟糕，我可能会立即忘记这一点。

顺便说一下: 动画在笔记本电脑上运行得很好(大多数时候)，但在三星 Galaxy 上，选项卡 requestAnimationFrame 给了我这样的结果(60fps、60fps、60fps、29fps、29fps、60fps、60fps、60fps、29fps......)

Answer 1

延迟很难被注意到，但它确实存在。我调整了您的代码以使延迟更加明显。

var layer1 = document.getElementById('layer1').getContext('2d');
var layer2 = document.getElementById('layer2').getContext('2d');

var x;
var y;
var angle = 0;
var last_frame = 0;
layer1.globalAlpha = .5;

function render(timestamp) {

  fps = timestamp - last_frame;
  last_frame = timestamp;

  // optimal framerate would be 60 (~16ms/"loop") -> count ratio according to that
  // for example if fps is 32 -> 32/16 = 2 -> we move ball twice the normal distance
  var delta = fps / 16;

  if (angle > Math.PI * 2) {
    layer1.clearRect(0, 0, 400, 400);
    angle %= Math.PI * 2;
  }

  angle += 0.02 * delta;
  x = 200 + 100 * Math.cos(angle);
  y = 200 + 100 * Math.sin(angle);

  layer1.beginPath();
  layer1.arc(x, y, 20, 0, Math.PI * 2);
  layer1.stroke();
  requestAnimationFrame(render);
}
render(16);
layer2.beginPath();
layer2.arc(200, 200, 80, 0, Math.PI * 2);
layer2.fill();

canvas,
#frames_label {
  position: absolute;
  top: 0;
  left: 0;
}

<canvas id="layer1" width="400" height="400">
</canvas>
<canvas id="layer2" width="400" height="400">
</canvas>
<div id="frames_label"></div>