Question

我正在使用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遇到此问题？关于如何解决它的任何想法？

Phonegap不断移动html5画布

0 个答案: