如何移动 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);

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

调用 context.drawImage() 后，图像将无法再被处理。正如它所暗示的那样，您已将其绘制到 canvas 上。它与 DOM 中的 HTML 元素不同。它现在只是 canvas.

上的彩色像素

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

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

因此您需要清除canvas。

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();

如何移动 JavaScript 中的图像？

How do I move an image in JavaScript?

javascript

canvas

image

move