使用setInterval在多维数组中循环以创建动画

Question

我在遍历多维数组以在画布上设置动画时遇到了相当大的麻烦。

我现在得到的是动画的最终位置，而不是整个序列

为什么要这样使用多维数组？这个想法是PHP输出一个多维数组，然后我可以循环使用它来创建动画。

  <script>
           canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");
    r = new Image()
    r.src = 'redsprites.png';
    image2 = new Image()
    image2.src = 'pitch.png';
    b = new Image()
    b.src = 'bluesprites.png';
    z = new Image()
    z.src = 'ball.png';

var action = [[[z,5,7],[b,9,7],[r,4,4],[b,7,24],[r,5,2],[b,10,100],[r,2,2],[b,45,2],[r,4,4],[b,3,3] ],
 [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,11,13],[b,15,13],[r,7,13],[b,10,33],[r,8,11],[b,19,103],[r,11,5],[b,51,5],[r,10,10],[b,9,9] ],
 [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,5,7],[b,9,7],[r,4,4],[b,7,24],[r,5,2],[b,10,100],[r,2,2],[b,45,2],[r,4,4],[b,3,3] ],
 [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,11,13],[b,15,13],[r,7,13],[b,10,33],[r,8,11],[b,19,103],[r,11,5],[b,51,5],[r,10,10],[b,9,9] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,5,7],[b,9,7],[r,4,4],[b,7,24],[r,5,2],[b,10,100],[r,2,2],[b,45,2],[r,4,4],[b,3,3] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,11,13],[b,15,13],[r,7,13],[b,10,33],[r,8,11],[b,19,103],[r,11,5],[b,51,5],[r,10,10],[b,9,9] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,5,7],[b,9,7],[r,4,4],[b,7,24],[r,5,2],[b,10,100],[r,2,2],[b,45,2],[r,4,4],[b,3,3] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,11,13],[b,15,13],[r,7,13],[b,10,33],[r,8,11],[b,19,103],[r,11,5],[b,51,5],[r,10,10],[b,9,9] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,5,7],[b,9,7],[r,4,4],[b,7,24],[r,5,2],[b,10,100],[r,2,2],[b,45,2],[r,4,4],[b,3,3] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
 [[z,11,13],[b,15,13],[r,7,13],[b,10,33],[r,8,11],[b,19,103],[r,11,5],[b,51,5],[r,10,10],[b,9,9] ],
  [[z,11,10],[b,12,13],[r,7,10],[b,10,30],[r,8,8],[b,16,103],[r,8,5],[b,51,5],[r,10,7],[b,9,6] ],
  [[z,8,10],[b,12,10],[r,7,7],[b,10,27],[r,8,5],[b,13,103],[r,5,5],[b,48,5],[r,7,7],[b,6,6] ]];
  var draw = function(){
  //ctx.clearRect(0, 0, 500, 700);
  ctx.drawImage(image2, 0, 0, 622, 924, 0, 0, 300, 500);
for(h = 0; h < action.length; h++)
   {
for(m = 0; m < action[h].length; m++)
       {
        ctx.drawImage(action[h][m][0], 0, 0, 100, 100, action[h][m][1], action[h][m][2], 15, 15);
        }
 }
}
setInterval(draw, 100);
 </script>

Answer 1

您应该将setInterval替换为setTimeout
通过使用setInterval，您将创建无限循环，因为您在每次draw函数调用中都会以一定的间隔调用一个新循环。