javascript - 使用随机/数组生成的坐标创建 Canvas 线。不工作，为什么？

Question

我不明白为什么 Canvas 线的坐标没有使用数组进行消化:有什么建议吗？

我正在尝试为随机生成的线组创建一种算法，这些线组最终从最后一条线结束的地方链接在一起。就像一条蛇，只要你愿意，它就会变得更长。

     var c = document.getElementById("playground");
     var ctx = c.getContext("2d"); 

  //global scope
  var i; 
var c1 = []; //c is short for collect
var c2 = [];
var c3 = [];
var c4 = [];

var initiate = function(){ //the buttom that triggers the program


var clock = function(){

 /* if(i){  
 alert(i); 
}*/

  i+=1; //increment each time the..
  //function gets called. 

 var a = Math.round(Math.random()*200); 
 var b = Math.round(Math.random()*200); 
 var c = Math.round(Math.random()*200); 
 var d = Math.round(Math.random()*200); 
 c1.push(a); 
 c2.push(b);
 c3.push(c);
 c4.push(d);


   ctx.beginPath(); 
   ctx.moveTo(c1[i], c2[i]);  //Here is where the issue seems to be? they don't run.
   ctx.lineTo(c3[i], c4[i]); 
   ctx.stroke(); 

    //if(c1.length===10){
    //alert(c1);
    //}

   }; //end of clock

    setInterval(clock,80);



    }; //end of parent function

Answer 1

您正在将 i 初始化为 var i;。当您递增它时，它会导致 NaN，因此只需将其初始化为 var i = 0; 或类似的即可。

编辑:另外，为什么你的问题出现在该行是因为你试图访问数组的第 NaN 个元素，这是 JavaScript 不喜欢的。