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

如何在JavaScript中移动图像？

1 个答案: