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函数调用中以特定间隔调用新循环。

使用setInterval循环通过多维数组来创建动画

1 个答案: