Question

有一些类似的问题，但没有一个答案可以解决我的问题。我正在使用画布模拟太阳系。动画功能调用一个函数来更新位置，然后这些位置以圆圈的形式显示在屏幕上。我试过不调用函数动画，而只是使用初始条件绘制物体，这很好，但是，当尝试通过动画函数绘制物体时，即使函数已通过，也不会绘制任何东西，甚至不会绘制太阳。

为什么他们不在画布上绘画？

这是代码（我删除了for循环，该循环会绘制所有行星，仅出于发展目的绘制地球，我也没有复制顶部的所有全局变量，因为它们占用了大量的空格）：

var massList = [massMecury, massVenus, massEarth, massMars, massJupiter, massSaturn, massUranus, massNeptune];

var xPosList = [initialMecuryXPos, initialVenusXPos, initialEarthXPos, initialMarsXPos, initialJupiterXPos, initialSaturnXPos, initialUranusXPos, initialNeptuneXPos];
var yPosList = [initialMecuryYPos, initialVenusYPos, initialEarthYPos, initialMarsYPos, initialJupiterYPos, initialSaturnYPos, initialUranusYPos, initialNeptuneYPos];
var xVelList = [initialMecuryXVel, initialVenusXVel, initialEarthXVel, initialMarsXVel, initialJupiterXVel, initialSaturnXVel, initialUranusXVel, initialNeptuneXVel];
var yVelList = [initialMecuryYVel, initialVenusYVel, initialEarthYVel, initialMarsYVel, initialJupiterYVel, initialSaturnYVel, initialUranusYVel, initialNeptuneYVel];

//position and velocity scales so they fit on the screen
var posScale = 1.7E10;
//var velScale = 3E9;

var pauseButtonPressed = false;

function axis (){

    var canvas = document.getElementById("solarsys");
    c=canvas.getContext('2d');

    //moves the origin to the centre of the page
    c.translate(400, 275);
    //makes the y axis grow up and shrink down
    c.scale(1,-1);

    //c.fillRect(-innerWidth/2,-innerHeight/2,innerWidth,innerHeight); if want a black background
}

function calAcc(i) {

    //calculates distance between the earth and the sun
    var r = Math.sqrt((xPosList[i]*xPosList[i]) + (yPosList[i]*yPosList[i]));

    //calculates the angle of displacement between the earth and sun
    var theta = Math.atan(yPosList[i]/xPosList[i]);

    //calculate the force on the earth using F = Gm1m2/r^2
    //force is towards the centre of the sun
    var F = (G*massSun*massList[i])/(r*r);

    //correct the angle based on which quadrant it is in
    theta=Math.abs(theta);
    if (xPosList[i] < 0 && yPosList[i] < 0){
        theta = theta;
    } else if (xPosList[i] > 0 && yPosList[i] < 0){
        theta = Math.PI-theta;
    } else if (xPosList[i] > 0 && yPosList[i] > 0){
        theta = theta-Math.PI;
    } else{
        theta = (2*Math.PI)-theta;
    }

    var fX = Math.cos(theta)*F;
    var fY = Math.sin(theta)*F;

    //calculate earths acceleration using Newton 2nd a = F / m 
    var aX = (fX/massList[i]);
    var aY = (fY/massList[i]);

    return [aX, aY];
}

function leapfrog(i) {

    var dt = 5000;

    var a = calAcc(i);

    xVelList[i] = xVelList[i] + (a[0]*dt);
    yVelList[i] = yVelList[i] + (a[1]*dt);

    xPosList[i] = xPosList[i] + (xVelList[i]*dt);
    yPosList[i] = yPosList[i] + (yVelList[i]*dt);

}

function drawBody(i) {
    c.beginPath();
    c.arc(xPosList[i]/posScale, yPosList[i]/posScale, 1, 0, twoPi, false);
    c.stroke();
    c.closePath();  

    console.log('body drawn');
}

function drawSun(){
    //draw a yellow circle - the sun
    c.beginPath();
    c.arc(0, 0, 2, 0, twoPi, false);
    c.fillStyle = '#ffcc00';
    c.fill();
    c.stroke();
    c.closePath();
}

function animate() {

    var i = 2;

    //for (var i=0; i< xPosList.length; i++){
    leapfrog(i);

    drawBody(i);

    drawSun();

    console.log(xPosList);


    //clears canvas each new loop
    c.clearRect(-innerWidth/2,-innerHeight/2,innerWidth,innerHeight);

}


window.onload=function() {
    axis();

    var looper=setInterval(animate,1);}

Answer 1

您有几个要解决的问题：

您有一个setInterval，它的执行间隔为1毫秒。这似乎太快了，我绝对无法保证您的浏览器能够绘制要绘制的东西。
在动画功能中，您可以绘制事物，但立即将其删除。您需要先清除画布，然后才在画布上绘制东西。
您的代码很难阅读，请考虑对其进行重构

传递值并将其输出到控制台，但不在画布上绘制

1 个答案: