Question

我是画布的初学者，我陷入了在画布中创建多个图像的困境。我创造了一个在画布内反弹的球。现在，当我点击画布中的某个地方时，我想创建第二个球。如果我的问题太倾倒请饶恕我。这是代码。

animate函数在页面加载时执行：

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);
}

请你帮我解决这个问题。谢谢你。

Answer 1

此行表示每次调用＆＃34; drawball＆＃34;时都会清除画布。功能：

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

所以如果你想画第二球，你应该打电话给＃34; drawball＆＃34;曾经但是有一个包含所有球的阵列......就像那样：

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);
}

Haven没有对它进行测试......但是你现在已经有了这个想法。

单击时创建新的画布动画

1 个答案: