画布推送对象失败

Question

每当我正在审阅并尝试重新编写代码时，我总会遇到错误和一些意外问题。我正在创建一个名为draw()的函数对象，并试图将它推入到一个空数组中，以实现动画目的。代码如下：

function draw(){ 
      var r = 20; 
      var x = Math.random()*canvas.width - r; 
      var y = Math.random()*canvas.height - r; 
      ctx.beginPath(); 
      ctx.arc(x,y,r,Math.PI*2,false); 
      ctx.fillStyle='yellow'; 
      ctx.fill(); 
     } 


     myArray = []; 

    for(i=0;i<20;i++){ 
     myArray.push(draw()); 
    } 

    function animate(){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     requestAnimationFrame(animate); 
     for(i=0;i<myArray.length;i++){ 
      myArray[i]; 
     } 
    } 

    animate(); 

当我检查在控制台myArray对象，它只是弹出与undefined值，这意味着有内部myArray对象完全空20个对象。我坚持了2个小时，有人可以告诉我我在哪里出错了？提前致谢。

Answer 1

myArray.push(draw())立即调用draw()函数，并将其返回值（undefined）放入数组中。你可能要推到函数的引用，所以省略()：

myArray[i](); 

推：

myArray.push(draw); 

然后，在你的for循环，从你需要括号中的数组调用的函数相同功能似乎有点没有意义，因为您可以直接从循环中调用函数而不使用数组，但我假设您想要设置运行某些预定义序列的几种不同功能的可能性，这些功能未显示。

不管怎样，下面的演示显示在上面的完整代码的环境中工作的变化：

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

 
function draw() { 
 
    var r = 20; 
 
    var x = Math.random() * canvas.width - r; 
 
    var y = Math.random() * canvas.height - r; 
 
    ctx.beginPath(); 
 
    ctx.arc(x, y, r, Math.PI * 2, false); 
 
    ctx.fillStyle = 'yellow'; 
 
    ctx.fill(); 
 
} 
 

 
myArray = []; 
 

 
for (i = 0; i < 20; i++) { 
 
    myArray.push(draw); // this line changed 
 
} 
 

 
function animate() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    requestAnimationFrame(animate); 
 
    for (i = 0; i < myArray.length; i++) { 
 
    myArray[i]();  // this line changed 
 
    } 
 
} 
 

 
animate();

<canvas></canvas>