Функция дублирования после задержки

Question

У меня есть функция, которая позволяет моей машине идти сверху вниз, и теперь я хочу, чтобы этот автомобиль повторялся, когда он доходил до конца холста. Поэтому, когда мой автомобиль уходит на дно, он должен снова появиться наверху и продолжать делать это.

Это моя функция, которая тянет автомобиль:

//===================== 
//ENTER: OBSTACLE CAR 
//===================== 

//Uploading car 
var car1 = new Image(); 
car1.src = "img/Car.png"; 

//Setting properties of car 
var x1 = 450; 
var y1 = 40; 
var speed1 = 0.1; 
var angle1 = 180; 
var mod1 = 0; 

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

//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/1), -(car1.height/1)); 
      context.restore(); 

      } 

Это мое возвращение функция setInterval, которая не работает:

setInterval(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/1), -(car1.height/1)); 
context.restore();  

}, 1000); // every 1000 ms 

Answer 1

Вам нужно сбросить счетчики, когда они достигают определенный предел, т. е. край холста, f.ex. внутри drawCar() метода:

if (x1 > context.canvas.width) x1 = -car1.width; 
if (y1 > context.canvas.height) y1 = -car1.height; 

Регулировка по мере необходимости в зависимости от того, что вы после этого.

(Также не забывайте использовать обработчик onload с загрузкой изображения).