javascript在畫布上消失的對象

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);
}

當我將update方法的最后兩行注釋掉時，兩個圓都畫得很好，但是當我嘗試在chrome上運行地球球體的代碼中添加最后兩行以嘗試更新地球在軌道上的位置時，消失了！

Chrome調試器未顯示任何錯誤，所以我不知道為什么會發生它。

編輯：：

好吧，我發現由於一個小的輸入錯誤（用math.pi代替Math.PI），我的行星x和y值變為NaN。

但是現在我的地球在軌道上停留在90度角，並且根本不動，至少它吸引了任何想法？

Answer 1

解決了。

大部分問題來自使用math.pi而不是Math.PI，最重要的是，我沒有設置值來更改軌道角度，這意味着軌道始終保持在90度，因此沒有軌道。

Chrome調試非常幫助我解決了所有這些問題，非常感謝user1816548