点击按钮创建一个新对象

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>