JavaScript在畫布上消散的對象

我正在寫一個腳本來繪製太陽圖像，並在其周圍繪製地球軌道圖像。JavaScript在畫布上消散的對象

我已經定義行星的類像這樣：

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度的軌道上，根本不會移動，至少它會吸引任何想法？

來源

2012-12-09 Ste Hawkins

如果一個斷點設置抽獎功能，什麼是Earth.x和Earth.y的實際值？ – tjltjl

我老實說，甚至不知道如何在javascript中添加斷點，我從來沒有寫過任何Visual Studio之前的大型IDE。 –

在谷歌瀏覽器和Firefox中，您都可以使用附帶的調試器設置斷點，檢查運行時的值等。強烈建議，幫助調試很多。 https://developers.google.com/chrome-developer-tools/docs/scripts-breakpoints – tjltjl

解決了它。

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

Chrome的調試非常幫助我搞清楚這一切了，所以非常感謝user1816548

來源

2012-12-09 20:00:04

JavaScript在畫布上消散的對象

回答

相關問題