通过并输出值到控制台但不在 canvas 上绘制

Question

有几个类似的问题，但 none 的答案解决了我的问题。我正在使用 canvas 模拟太阳系。动画函数调用一个函数来更新位置，然后这些位置以圆圈的形式显示在屏幕上。我试过不调用函数 animate 而是简单地使用初始条件绘制主体，这工作正常但是当试图通过动画函数绘制它们时没有绘制任何东西 - 甚至没有太阳 - 即使函数已经通过。

他们为什么不在 canvas 上画画？

这是代码（我已经删除了 for 循环，该循环会绘制所有行星以仅出于开发目的绘制地球，我也没有复制顶部的所有全局变量，因为它们占用了一个很多 space):

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

您有几个问题需要解决：

您有一个以 1 毫秒暂停执行的 setInterval。这似乎太快了，我绝对看不到任何保证您的浏览器能够绘制要绘制的东西。
在你的动画功能中你画了东西，但立即删除它们。你需要先清除 canvas 然后才在 canvas.
你的代码很难读，考虑重构一下

通过并输出值到控制台但不在 canvas 上绘制

passing through and outputting value to console but not drawing on the canvas

html

javascript

simulation

canvas