Javascript 单击创建新画布动画

我是一个画布初学者，我被困在画布上创建多个图像。我创建了一个在画布内反弹的球。现在我想在单击画布中的某个位置时创建第二个球。如果我的问题太多，请饶了我。这是代码

在页面加载时执行动画功能：

function animate()
{
    // do something
    setInterval(function(){drawBall(ball_props,color,null);},10);
}

function drawBall(ball_props,color)
{
    var c = document.getElementById("bouncy_ball");
    var context = c.getContext("2d");
    context.clearRect(0,0,c.width,c.height);

    trajactory(ball_props);

    context.beginPath();
    context.arc(ball_props.center_x,ball_props.center_y,radius,0,Math.PI*2,false);
    context.stroke();
    context.fillStyle = color;
    context.fill();
    context.lineWidth = "2";
    context.lineCap = "round";
    context.strokeStyle = "black";
    context.stroke();

    boundaryConditions(ball_props);

    accelerator(ball_props);
};

这有助于我在画布动画中创建第一个球。现在我有一个点击功能，它应该触发第二个球，但是它删除第一个球并创建一个新球

function onclickingCanvas()
{
    setInterval(function(){drawBall(ball2_props,color2);},10);
}

---

您能帮我解决这个问题吗？提前谢谢。

这一行表示您每次调用牵引杆功能时都会清除画布：

context.clearRect(0,0,c.width,c.height);

因此，如果你想画第二个球，你应该调用一次牵引球，但数组包含所有的球。。。诸如此类：

var ball1 = {
    ball_props: ball_props,
    color: color
}, ball2 = {
    ball_props: ball2_props,
    color: color2
};

var balls = [ball1];


function animate(){
    setInterval(function(){drawBall(balls);},10);
}

function drawBall(balls)
{
    var c = document.getElementById("bouncy_ball");
    var context = c.getContext("2d");
    context.clearRect(0,0,c.width,c.height);

    for(var i=0; i<balls.length; i++){

        trajactory(balls[i].ball_props);

        context.beginPath();
        context.arc(balls[i].ball_props.center_x,balls[i].ball_props.center_y,radius,0,Math.PI*2,false);
        context.stroke();
        context.fillStyle = balls[i].color;
        context.fill();
        context.lineWidth = "2";
        context.lineCap = "round";
        context.strokeStyle = "black";
        context.stroke();

        boundaryConditions(balls[i].ball_props);

        accelerator(balls[i].ball_props);
    }

};


function onclickingCanvas(){
    balls.push(ball2);
}

---

还没有测试过。。。但是你现在有了主意。

在单击函数中再次调用setInterval不会改变什么，因为你只是覆盖了它。必须调用牵引杆函数两次，第一个球调用一次，第二个球调用第二次。希望这有帮助。单独调用函数对我没有帮助。我需要设定间隔来让球移动。如果有别的选择，你能给我建议一下吗。