如何在 JavaScript 中移动图像？

Question

我正在尝试使用 JS 绘制和移动图像。

这段代码一直有效，直到 moveImage 函数什么都不做。谁能帮我解决这个问题？

我相信如果我将图像放在 html 中，我可以移动它，但如果可能的话，我希望让脚本代码代替它。

function init() {
  var x = 1, y = 1;

  var context = document.getElementById("Vehicle").getContext("2d");
  var img = new Image();
  img.onload = function () { context.drawImage(img, x, y, 24, 20); }
  img.src = "images/Image.png";

  //move
  function moveImage(imgX, imgY) { 
    img.style.left = imgX + "px";
    img.style.top = imgY + 'px';
  }

  setInterval(function () {
    var FPS = 60;
    x++;
    y++;
    if (x > 1000) { x = 1; }
    if (y > 1000) { y = 1; }
    moveImage(x, y);
  }, 1000/FPS);
};

我的猜测是 img.style.left/right 要么不正确，要么我没有正确指向 img。

如果没有办法做到这一点，有没有办法让我删除（不仅仅是隐藏）图像，以便我可以在新位置重新绘制它？

Answer 1

您有范围问题。您在区间内定义FPS。这需要在之前完成，以便可以在间隔步长参数上使用。

var FPS = 60;
var timer = (1000/FPS);

setInterval(function () {
    x++;
    y++;
    if (x > 1000) { x = 1; }
    if (y > 1000) { y = 1; }
    moveImage(x, y);
  }, timer);

---

此外，您不能简单地在画布上重新定位图像。它需要重新绘制到画布上。

一旦您致电context.drawImage()，该图像将无法再被操纵。正如它所暗示的，你已经把它画到了画布上。它与 DOM 中的 HTML 元素不同。它现在只是画布上的彩色像素。

查看演示：http://jsfiddle.net/8Ljvnt8j/1/

但是，您会注意到图像正在重复。这是因为您在画布上绘图。画布是 2d 的，所以你只是在已经存在的东西之上绘画。

因此你需要清理画布。

img.onload = function () { 
   context.clearRect(0, 0, canvas.width, canvas.height);
   context.drawImage(img, imgX, imgY, 24, 20);
}

查看演示：http://jsfiddle.net/8Ljvnt8j/2/

---

总而言之：

function init() {

    var x = 1;
    var y = 1;

    var canvas = document.getElementById("Vehicle");

    drawImage();

  //move
  function drawImage() {       
      var context = document.getElementById("Vehicle").getContext("2d");
      var img = new Image();
      img.onload = function () { 
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(img, x, y, 24, 20);
  }
  img.src = "https://placeholdit.imgix.net/~text?txtsize=5&txt=20%C3%9720&w=20&h=20";

  }

  var FPS = 60;
   var timer = (1000/FPS);

setInterval(function () {
    x++;
    y++;
    if (x > 1000) { x = 1; }
    if (y > 1000) { y = 1; }
    drawImage();
  }, timer);
};

init();