Question

每当我正在审核并尝试重新编写代码时，我总会遇到错误和一些意想不到的问题。我正在创建一个名为draw()的函数对象，并尝试将其推入空数组20次以用于动画目的。代码如下：

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对象时，它只弹出了20个具有undefined值的对象，这意味着内部myArray对象完全是空的。我坚持了2个小时，有人可以告诉我哪里出错了吗？提前谢谢。

Answer 1

myArray.push(draw()) 立即调用 draw()函数并将其返回值（undefined）放入数组中。您可能想要推送对该函数的引用，因此省略()：

myArray.push(draw);

然后，在你的for循环中，要调用数组中的函数，你需要使用括号：

myArray[i]();

推送相同的函数似乎有点无意义，因为您可以直接从循环中调用函数而不使用数组，但我假设您要设置运行某些预定义的可能性没有显示的几个不同功能的序列。

无论如何，以下演示显示了上述更改在您的完整代码的上下文中工作：

＆＃13;

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

＆＃13;

<canvas></canvas>

＆＃13;

画布推送对象失败

1 个答案: