Javascript 画布游戏仅在窗口处于非活动状态时开始绘制

我注意到在我的画布代码中有一些奇怪的东西：我在做一个有小飞鬼的游戏。鬼的课程在下面。当我只是通过手动添加代码绘制1或2个em，并通过每帧更新x使em向右飞行时，例如，所有操作都运行平稳且良好

现在我运行了另一个测试，每100帧向数组添加一个重影，将其x更新100，然后将该重影绘制到帧中。（代码位于第一个块的下方，即绘图功能）

现在的问题是，它们实际上是添加和绘制的，但我在板上看不到它们，直到我通过单击任务栏等方式使窗口处于非活动状态。

有人知道这里出了什么问题吗

    /* 
 * Class for little ghosts
 */
function Ghost (name) {
    this.name = name;
    this.ghost = new Image();
    this.ghost.src = "img/ghost.png";
    this.ghostWidth = 150;
    this.ghostHeight = 100;
    this.ghostSpriteOffsetX = 0;
    this.ghostSpriteOffsetY = 0;
    this.ghostX = 0;
    this.ghostY = 0;
}
Ghost.prototype.drawGhost = function() {
    context2D.drawImage(this.ghost, this.ghostSpriteOffsetX, this.ghostSpriteOffsetY, this.ghostWidth, this.ghostHeight, this.ghostX, this.ghostY, this.ghostWidth, this.ghostHeight);
};
Ghost.prototype.goToX = function(x) {
    this.ghostX = x;
};
Ghost.prototype.goToY = function(y) {
    this.ghostY = y;
};
Ghost.prototype.turnPink = function() {
    this.ghostSpriteOffsetX = 0;
};
Ghost.prototype.turnBlue = function() {
    this.ghostSpriteOffsetX = 150;
};
Ghost.prototype.turnPurple = function() {
    this.ghostSpriteOffsetX = 300;
 };

-

函数绘图（）
{
//透明板
clearRect（0，0，canvas.width，canvas.height）；
如果（帧%100==0）{
鬼[ghostId]=新鬼（“g-”+帧）；
鬼魂[ghostId].goToX（第100帧）；
ghostId++；
}
//画鬼
对于（i=0；i如何调用绘图例程？使用setTimeout？即：它们是在不同的帧之间结束还是在一个大的while循环？使用
setInterval（draw，1000/FPS）；
Hm，这与我的理论不符。（画布仅在脚本完成后才会刷新。）你测试过这个错误是否是特定于浏览器的吗？我刚刚注意到它是特定于浏览器的。这只发生在Firefox中，而且只发生在大约70%的时间里…Hmmpf…也许我应该尝试预渲染？对不起，我更喜欢Opera浏览器。我建议修改不同的内容，以检查它是否改变了某些内容（CSS、DOM结构、脚本调用、加载事件顺序（可能是竞争条件？）。
function draw()
{
// clear board
context2D.clearRect(0, 0, canvas.width, canvas.height);

if(frame%100==0){
    ghosts[ghostId] = new Ghost("g-"+frame);
    ghosts[ghostId].goToX(frame-100);
    ghostId++;
}
// Draw ghost
for (i=0; i<ghosts.length; i++)
{
    ghosts[i].drawGhost();
}



frame++;
}