畫布推送對象失敗

每當我正在審閱並嘗試重新編寫代碼時，我總會遇到錯誤和一些意外問題。我正在創建一個名爲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個小時，有人可以告訴我我在哪裏出錯了？提前致謝。

來源

2017-05-19 mystreie

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>

來源

2017-05-19 02:47:04 nnnnnn

感謝@ NNNNNN現在我得到了這一點，用引用傳遞不應包括（），因爲我的函數對象中沒有返回值。我只是想回顧一下我學到的東西，並且繼續編寫一些隨機的東西來獲得對畫布材料的堅實感受：D感謝您的回覆！ – mystreie

即使你的函數確實返回了一個值，你仍然想使用一個*參考*函數，你不想調用它。所以不要在那個時候使用'（）'。只有在你想調用它的地方使用'（）'。（如果函數的返回值本身是對某個函數的引用，則會發生異常。） – nnnnnn

畫布推送對象失敗

回答

相關問題