在按钮单击时创建一个新对象

Question

我正在使用 Javascript 制作动画。它是一个具有设定速度并在盒子内移动的球。动画有效，我有一个按钮可以提高动画的速度。我想制作一个新按钮，当我点击它时会创建一个新球。

我的 Javascript 代码如下：

var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");

var fart = document.getElementById("fart")
var ny = document.getElementById("ny")

var circle = {
    x:40,
    y:50,
    r:40,
}

var dx=5;
var dy=5;

var color = ["green", "blue", "yellow", "red", "orange", "pink"]

fart.onclick = function circleto (x,y,r) {
    circle.x += 0;
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI);
    ctx.closePath();
    ctx.fillStyle = color[Math.floor(Math.random()*color.length)];
    ctx.fill();
    
    requestAnimationFrame(circleto);

    if( circle.x<0+circle.r || circle.x>canvas.width-circle.r) dx=-dx; 
    if( circle.y<0 + circle.r || circle.y>canvas.height-circle.r) dy=-dy; 
    circle.x+=dx; 
    circle.y+=dy;
}

这是我的 HTML 代码：

<button id="fart">øk hastigheten</button>
<button id="ny">ny ball</button>
<canvas id="canvas" width="600px" height="400px"></canvas>

Answer 1

您应该做的是将圆圈存储在数​​组中。 然后循环遍历每个项目并单独更改它们。

我希望下面的代码可以帮助作为一个例子：

var
animationRunning = false,
circles = [{ x : 0, y : 0, r : 0 }]; // array

...

function step() {
     if(animationRunning  === true) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for(var i = O, length = circles.length; i < length; i++) {
           var circle = circles[i];

           ctx.beginPath();
           ctx.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI);
           ctx.closePath();
           ctx.fillStyle = color[Math.floor(Math.random()*color.length)];
           ctx.fill();

           if( circle.x<0+circle.r || circle.x>canvas.width-circle.r) dx=-dx; 
           if( circle.y<0 + circle.r || circle.y>canvas.height-circle.r) dy=-dy; 
           circle.x+=dx; 
           circle.y+=dy;
           circles[i] = circle; // overide the previous version
        }
        requestAnimationFrame(circleto);
     }
}

fart.onclick = function circleto (x,y,r) {  
    if(animationRunning === false) {
        step();
    }
}
ny.onclick = function circleto (x,y,r) {  
    circles.push({ x : 0, y : 0, r : 0 });
    if(animationRunning === false) {
        step();
    }
}

Answer 2

<button id="fart">øk hastigheten</button>
<button id="ny">ny ball</button>
<canvas id="canvas" width="600px" height="400px"></canvas>

<script>
 var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");


var fart = document.getElementById("fart")
var ny = document.getElementById("ny")


var color = ["green", "blue", "yellow", "red", "orange", "pink"]

var circles = [
{
    x:40,
    y:50,
    r:40,
    dx:5,
    dy:5,
    },
    ];

fart.onclick = function circleto (x,y,r) {
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.beginPath();
    for (i in circles){
    var circle = circles[i]; 
    circle.x += 0;
    ctx.arc(circle.x, circle.y, circle.r, 0, 2*Math.PI);
    ctx.closePath();
    ctx.fillStyle = color[Math.floor(Math.random()*color.length)];
    ctx.fill();
    if( circle.x<0+circle.r || circle.x>canvas.width-circle.r) circle.dx=-circle.dx; 
    if( circle.y<0 + circle.r || circle.y>canvas.height-circle.r) circle.dy=-circle.dy; 
    circle.x+=circle.dx; 
    circle.y+=circle.dy;
    }
    requestAnimationFrame(circleto);
}

ny.onclick = function newcircleto (x,y,r) {
    var newcircle = {
    x:40,
    y:50,
    r:40,
    dx:5,
    dy:5,
};
circles.push(newcircle);
}

</script>