Question

问题

我正在尝试在画布上获取图像，以便从左向右平滑移动。它在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();

我看到了什么

我意识到之前已经问过这个问题而且在问之前我确实看过了。然而，遗憾的是，答案没有帮助。

感谢您的帮助！我很感激。

Answer 1

例如，在您的头寸计算中使用时间增量。这将确保在给定时间内将对象移动特定值，而不管FPS和帧之间的延迟。

编辑你的小提琴： http://jsfiddle.net/R8sEV/2/

错误的方法：

x += 5

好方法：

x += speed * delta / 1000

其中delta是从最后一帧传递的[ms]时间 - 速度以[像素/秒]为单位

HTML5 Canvas DrawImage Stutter / Choppiness

1 个答案: