Question

我正在编写一个绘制太阳图像的脚本，并在周围有一个地球轨道的图像。

我已经定义了一个行星类：

function planet(name, size, rotateRate, startx, starty, colour, scale, oRad, oAng, oSpd){//container class for planets
this.name = name;
this.rotateRate = rotateRate;
this.x = startx;
this.y = starty;
this.colour = colour;
this.scale = scale;
this.size = size;
this.orbitRadius= oRad;
this.orbitAngle = oAng;
this.orbitSpeed = oSpd;
this.drawByArc = 
    function drawArcCircle(){//draws circles using the arc method
        context.save();
        context.strokeStyle = '#000000';
        context.fillStyle = this.colour;
        context.lineWidth=3;
        context.beginPath();
        context.arc(this.x,this.y,this.size*this.scale,0,Math.PI * 2,false)
        context.stroke();
        context.fill();
        context.closePath();
        context.restore();
    }
    }

现在我在程序中创建了两个类的实例，并使用以下函数将它们绘制得很好：

function gameLoop(){//The Game Loop
var thisTime = Date.now();//current time
var deltaTime = thisTime - lastTime;//find difference, not yet used
update();
draw();
lastTime = thisTime;
setTimeout(gameLoop, 1000/60);
}

function draw(){// Draws all the objects
    drawBackground();
    Sun.drawByArc();
    Earth.drawByArc();
}

function update(){// Updates for animation
//var newRotation = this.getCurrantRotation() + (this.getRotationRate()*deltaTime);
var gSegments;
gScale = 4;
simSpeed = 10;
Sun.scale = gScale;
Earth.scale = gScale;
Earth.orbitSpeed = 360/simSpeed;
//Earth.x = Sun.x + Earth.orbitRadius * Math.cos(Earth.orbitAngle * Math.pi / 180);
//Earth.y = Sun.y - Earth.orbitRadius * Math.sin(Earth.orbitAngle * Math.pi / 180);
}

当我将更新方法的最后两行注释掉时，两个圆圈都画得很好，但是当我添加最后两行以尝试更新轨道中的地球位置时，当我尝试在chrome中运行代码时地球球体消失了！

Chrome调试器没有显示任何错误，因此我不知道为什么会发生错误。

EDITED ::

好吧，我发现由于输入错误（math.pi而不是Math.PI），我的行星x和y值变成了NaN。

然而，现在我的地球在它的轨道上停留在90度点并且根本没有移动，至少它吸引了什么想法？

Answer 1

解决了它。

大多数问题来自使用math.pi而不是Math.PI 最重要的是，我没有设置一个值来改变轨道的角度，这意味着轨道总是保持在90°，这使得没有轨道。

Chrome调试非常有助于我搞清楚这一切，所以非常感谢用户1816548

画布上的javascript消失对象

1 个答案: