循环图像

Question

我在如何将我的图像循环50次，但在不同时间出现时遇到了麻烦。

这是我的代码：

//Uploading car
var car1 = new Image();
car1.src = "http://images.clipartpanda.com/car-top-view-clipart-red-racing-car-top-view-fe3a.png";

//Setting properties of car
var x1 = 450;
var y1 = 50;
var speed1 = 10;
var angle1 = -990;
var mod1 = 0.2;

//Interval for animation
 var moveInterval = setInterval(function () {
     drawCar();
 }, 30);

//Drawing the car turning and changing speed
function drawCar() {
    x1 += (speed1 * mod1) * Math.cos(Math.PI / 180 * angle1);
    y1 += (speed1 * mod1) * Math.sin(Math.PI / 180 * angle1);

    context.save();
    context.translate(x1, y1);
    context.rotate(Math.PI / 180 * angle1);
    context.drawImage(car1, -(car1.width / 2), -(car1.height / 2));
    context.restore();
     draw_multiple();


}

function draw_multiple() {
      var i;
      var obstacles = []; // How to put array so this code will work with array?
      for(i = 0; i < 10 ; i++) {
      drawCar ((i*70)+100,100, 30);
      }
 }

在这段代码中，我绘制了我的图像，但最后一个函数是for循环函数。提前致谢

Answer 1

像这样

function draw_multiple() 
{
    var obstacles = {
        "item1": (5x3) + 2, // obstacles[0] returns 17
        "item2": (2/2) * 5, // obstacles[1] returns 5
        "anotherItem": "This is a string" // obstacles[2] returns "This is a string"
    };

    for(var i=0; i<10 ; i++) {
        drawCar ((i*70)+100,100, 30);
    }

    for(var i=0; i<obstacles.length ; i++) {
        drawObstacles( obstacles[i] );
    }
}

您需要创建函数drawObstacles()。