Question

我的代码基本上取决于jsFiddle：http://jsfiddle.net/9jekdhn1/。我正在玩画布和动画。

我的问题是我得到一个未捕获的TypeError：无法读取未定义的canvas2.js的属性'x'：39。

我不明白为什么我会得到这个错误，它的行为就像它在运行脚本时看到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，但最初在max中没有circ（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++){ ...

FIDDLE

不明白为什么我得到一个未定义的错误

2 个答案: