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

问题描述：

我的代码基本上在jsFiddle上：http://jsfiddle.net/9jekdhn1/。我正在玩帆布和动画。不明白为什么我得到一个未定义的错误

我的问题是，我得到一个Uncaught TypeError：无法读取undefined 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);

答

错误相当多告诉你的是什么问题，你有这个

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

感谢你的帮助 – 2014-09-18 21:15:10

答

你迭代到max，但是最初有没有项目的max（20）号在circ。更改为：

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

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

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

相关推荐