问题
我试图让画布上的图像从左到右顺利移动。在 Chrome/Safari 上还不错（仍然有点卡顿），但在多台机器上的 Firefox 中存在明显的卡顿（在 Windows 和 Mac 上试过）。我对如何解决这个问题有点困惑。
我尝试了什么
我正在使用 requestAnimationFrame 而不是 setTimeout。我正在使用 clearRect 而不是设置画布宽度，尽管我正在清除整个画布而不是最小边界框，因为我想在最坏的情况下对其进行测试。我确实关闭了额外的标签。我什至禁用了 Firebug。我正在使用 drawImage 而不是图像数据函数。由于除了 clearRect 和 drawImage 之外我没有做任何其他事情，因此我避免使用屏幕外画布。
示例 1：http: //jsfiddle.net/QkvYs/
这个有一个固定的帧率，无论游戏循环运行的频率如何，它都能确保位置正确。它显示跳过的帧数。这个例子更接近我的目标。请注意，即使没有跳过任何帧，它看起来也很不稳定。我也玩过帧率但没有成功，虽然我想瞄准大约 30 fps (var frameRate = 33;)。
示例 2：http: //jsfiddle.net/R8sEV/
这是一个简单的方法，它所做的只是移动图像。这在多台机器上对我来说口吃。
//loop
function loop() {
//request anim frame
requestAnimationFrame(loop);
//set canvas once able
if (!canvas) {
var temp = document.getElementById("testCanvas");
if (temp) {
canvas = temp;
ctx = canvas.getContext('2d');
}
}
//update and render if able
if (canvas) {
//increase x
x += 5;
//start from beginning
if (x > canvas.width) {
x = 0;
}
//clear
ctx.clearRect(0, 0, canvas.width, canvas.height);
//image
ctx.drawImage(image, x, 200);
}
}
//start
loop();
我看到了什么
我意识到这个问题之前已经被问过，我确实在问之前看过。然而，不幸的是，给出的答案没有帮助。
谢谢您的帮助！我很感激。