不明白為什么我會收到未定義的錯誤

Question

我的代碼基本上是基於jsFiddle的： http : //jsfiddle.net/9jekdhn1/ 。 我在玩帆布和動畫。

我的問題是我遇到了Uncaught TypeError：無法讀取未定義canvas2.js：39的屬性'x'。

我沒有看到為什么我會收到此錯誤，並且它的行為就像在運行腳本時確實看到了x的值。 如果有人可以告訴我為什么我得到此錯誤以及如何解決它，那將是很好的。 我的劇本：

    var canvas = document.getElementById('canvasTwo');
     canvas.width = 1000;
     canvas.height = 500;
  var circ = [];
  var c = canvas.getContext('2d');
  var cW = c.canvas.width, cH = c.canvas.height;
  var max = 20;

 function newCircle(){
    var x = Math.floor(Math.random() * cW) + 1;
    var y = 300;
    var r = 5;
    var cWidth = Math.floor( 5* Math.random());
    var cHeight = Math.floor( 5* Math.random());
    circ.push({"x":x,"y":y,"width":cWidth,"height":cHeight,"r":r});
}


function draw(){
    newCircle();
    for(var i=0;i<max;i++){
        c.fillStyle = 'rgba(163,219,91,0.3)';
        c.beginPath();
        c.arc(circ[i].x+=3, circ[i].y+=.5, circ[i].r,0, 2* Math.PI, false);
        c.fill();
     if(circ[i].y > cH || circ[i].x>cW){
        circ.splice(i,1);
     }
   }
 };
 function animate(){
    c.save();
    c.clearRect(0, 0, cW, cH);
    draw();
    c.restore();
 }

 setInterval(animate, 30);

Answer 1

您要迭代到max ，但是最初在circ中沒有max （20）個項目。 改成：

for(var i=0;i<circ.length;i++)

http://jsfiddle.net/9jekdhn1/1/

Answer 2

該錯誤幾乎告訴您問題出在哪里，

circ[i].x

並告訴您沒有x屬性，因此該對象沒有這樣的屬性。
要么您遍歷了錯誤的數字，所以i沒有引用數組中的任何內容，要么您根本沒有添加x屬性。

在這種情況下，是前者，這是因為您有一個空數組

var circ = [];

然后你開始推到那個數組

circ.push({"x":x,"y":y,"width":cWidth,"height":cHeight,"r":r});

因此數組從0開始，並且第一次運行循環時，它內部只有一個對象，但是您將max設置為20因此要迭代到20，但是零索引處只有一個對象？

如果要限制為最大20，請添加一個條件，該條件使用小於最大長度的長度，像這樣

var val = circ.length < max ? circ.length-1 : max;

for(var i=0;i<val;i++){ ...

小提琴