在画布中将多个对象相对于当前位置移动到一起

Question

我有一个canvas元素，显示多个图像。我想要实现的是，当我点击一个按钮时，它应该在X坐标中移动200个位置。我设法移动第二张图片，但第一张图片没有移动。并且图像必须与其当前位置相对应地移动。我在这里通过附加我的javascript相同。

 $(window).on('load', function () {
    imageContent(200);
});
function imageContent(x) {
    var posX = x;
    var imgArray = ['http://via.placeholder.com/200x200?text=first', 'http://via.placeholder.com/200x200?text=second'];
    $.each(imgArray, function (i, l) {
        var img = new Image();
        img.onload = function () {
            var x = 0;

            myCanvas(img, i * posX);
        };
        img.src = l;
    });
}
function myCanvas(img, x) {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");

    var last_ts = -1
    var speed = 0.1

    function renderScene() {
        ctx.beginPath();
        ctx.drawImage(img, x, 0);
    }
    function fly(ts) {
        if (last_ts > 0) {
            x += speed * (ts - last_ts)
        }
        last_ts = ts

        if (x < 200) {

            imageContent(x);
            requestAnimationFrame(fly);
        }
    }
    renderScene();
    $('#movebutton').click(function () {
        x = 0;
        requestAnimationFrame(fly);
    });

}

qazxsw poi。如果有人能帮助我，我将不胜感激。

Answer 1

编辑：修改以实现并排运动

我稍微修改了你的代码，并删除了jQuery。看看它是否是你想要达到的效果：

Here is the codepen

var imgArr = [],
  c = document.getElementById("myCanvas"),
  ctx = c.getContext("2d"),
  last_ts = -1,
  speed = 0.1,
  x = 0

window.onload = function() {
  [
    'http://via.placeholder.com/200x200?text=first',
    'http://via.placeholder.com/200x200?text=second'
  ].forEach(function(obj, idx) {
    var img = new Image()
    img.onload = function() {
      drawImage(img, idx * 200, 0)
    }
    img.src = obj
    imgArr.push(img)
  })
}

function drawImages(x) {
  ctx.clearRect(0, 0, c.width, c.height)
  imgArr.forEach(function(obj, idx) {
    drawImage(obj, x + idx*200, 0)
  })
}

function drawImage(img, x, y) {
  ctx.beginPath()
  ctx.drawImage(img, x, y)
}

function fly(ts) {
  if (last_ts > 0) {
    x += speed * (ts - last_ts)
  }

  last_ts = ts

  if (x < 200) {
    drawImages(x)
    requestAnimationFrame(fly)
  }
}

document
  .getElementById('movebutton')
  .addEventListener('click', function() {
    x = 0
    fly()
  }, false)

canvas {
  border: 1px solid red;
}