1

我正在使用 HTML5 画布在 javascript 中制作自行车比赛游戏。游戏由三个画布组成：一个用于背景，一个用于关卡和一个用于自行车的小型移动画布（仅在 y 轴上上下移动）。

第三块画布根据自行车的位置不断移动。为了避免将自行车帆布移动得太快，我只在自行车移动了相当长的距离时才移动它。

if(newBikePos - oldBikePos > 20 || newBikePos - oldBikePos < -20) {
    newBikePos = ((chassis.body.getPos().y + leftWheel.body.getPos().y +
        rightWheel.body.getPos().y)/3 - 150); // Roughly the position of the bike

    gameCanvas.style.top = newBikePos * SCALE; // This is how I move the canvas
}

gameContext.clearRect(0, 0, gameCanvas.width, gameCanvas.height);

// Drawing the bike(chassis, leftwheel and rightwheel) onto the bike canvas

现在，当我在我的 Mac 上运行它时它工作得很好（chrome、firefox、safari），但是当我使用 Phonegap 在我的 Nexus 4 上运行它时，画布没有被正确清除。每次画布移动时，自行车都会在新定位的画布中平稳移动，但也会显示画布移动前最后一帧的自行车“静态图片”。当画布再次改变位置时，此“静止图像”消失，但随后按所述创建新静止图像。

即使我以每秒 60 帧的速度更新画布，“静态图片”仍然会显示，只是不那么明显。

有没有其他人在使用 Phonegap 时遇到过这个问题？关于如何解决它的任何想法？

4

0 回答 0