1

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

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

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 调试器没有显示任何错误，所以我不知道它为什么会发生。

编辑::

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

但是现在我的地球被困在其轨道上的 90 度角，根本不动，至少它在画，有什么想法吗？

4

1 回答 1

0

解决了。

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

Chrome 调试非常帮助我弄清楚这一切，非常感谢 user1816548

于 2012-12-09T20:00:04.960 回答