Javascript 画布渲染不平滑

由于某些原因，我的渲染有时会结巴。正如您在这里看到的（）。 使用箭头键移动。 底部画布只预渲染一次，然后每帧在主上部画布上绘制预渲染

这是我的代码，每帧调用一次：

var tick = (function() {
    var lastTimestamp = 0;

    return function(timestamp) {
        dt = (timestamp - lastTimestamp) / 1000;
        lastTimestamp = timestamp;

        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, self.resolution.width, self.resolution.height);

        var cameraPosition = camera.position;
        if(keys[37]) {
            cameraPosition.x -= 10 * dt;
        }
        if(keys[38]) {
            cameraPosition.y -= 10 * dt;
        }
        if(keys[39]) {
            cameraPosition.x += 10 * dt;
        }
        if(keys[40]) {
            cameraPosition.y += 10 * dt;
        }

        camera.position = cameraPosition;

        var tileSet = self.resource.get("tiles");

        ctx.save();
        // mapCamera starts at the same position as camera.
        // So (mapCamera.position - camera.position) is the offset we have to move.
        ctx.translate((mapCamera.position.x - camera.position.x) * 16, (mapCamera.position.y - camera.position.y) * 16);
        // mapCanvas is the prerendered canvas.
        ctx.drawImage(mapCanvas, -16, -16, self.resolution.width + 32, self.resolution.height + 32);
        ctx.restore();

        requestAnimationFrame(tick);
    };
})();

我一直在想为什么它不是100%平滑的，但我找不到解决办法。 有人知道为什么会这样吗？

3条建议如下：

•调用early requestAnimationFrame：通过我的适度测试，它表明，当rAF是第一个调用的函数时，事情会更顺利一些。很可能是因为它需要幕后工作才能开始工作。试试看
•使用drawImage时，坐标将为您舍入：您可能希望自己进行舍入，因为使用的是“地板”，而“天花板”可以提供更平滑的结果。

---

•最重要的是，您正在使用DOM（divs或类似工具）显示鼠标位置/fps。不要这样做。在画布（或其他可见画布）上使用fillText，因为你不能确定在更改这些值时是否会导致回流/重新绘制。

照你说的做了，但仍然口吃。事实上，在我功能强大的桌面/最新FF/Ch/最新Mac OS上，它感觉很平滑。这很奇怪，我在两台机器（arch linux）上测试了它也有同样的问题。