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

我在循环多维数组以在画布上设置动画时遇到了相当大的困难

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

为什么要这样使用多维数组？ 其思想是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>

canvas=document.getElementById（“myCanvas”）；
ctx=canvas.getContext（“2d”）；
r=新图像（）
r、 src='redsprites.png'；
image2=新图像（）
image2.src='pitch.png'；
b=新图像（）
b、 src='bluesprites.png'；
z=新图像（）
z、 src='ball.png'；
var作用=[[z，5,7]，[b，9,7]，[r，4,4]，[b，7,24]，[r，5,2]，[b，10100]，[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，13103]，[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，16103]，[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，19103]，[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，16103]，[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，13103]，[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，10100]，[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，13103]，[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，16103]，[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，19103]，[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，16103]，[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，13103]，[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，10100]，[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，13103]，[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，16103]，[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，19103]，[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，16103]，[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，13103]，[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，10100]，[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，13103]，[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，16103]，[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，19103]，[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，16103]，[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，13103]，[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，10100]，[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，13103]，[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，16103]，[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，19103]，[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，16103]，[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，13103]，[r，5,5]，[b，48,5]，[r，7,7]，[b，6,6]；
var draw=function（）{
//ctx.clearRect（0,0500700）；
ctx.drawImage（图像2,0,0,622,924,0,0,300,500）；
对于（h=0；h

您应该将

setInterval

替换为

setTimeout

---

通过使用

setInterval

，您正在创建无限循环，因为您在每个

draw

函数调用中以特定间隔调用一个新循环。

什么是

var i=0

和

i++

。这是while的主体还是for循环的主体？在这里，您指示解释器无限期地每秒调用

draw

20次。不要在循环中执行此操作。啊，让我更改它，抱歉，在此版本中保留了它。你说得对！我要说的是使用哪一阵法一级。好的，谢谢！我正在研究这个案例，研究它们之间的差异以及它们在循环中的工作方式，只是将一个换成另一个并没有解决问题。