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处理程序。）

延迟后复制功能

1 个答案: