Javascript：移动以编程方式创建的图像不起作用答案

【问题标题】：Javascript: Moving an image created programmatically not workingJavascript：移动以编程方式创建的图像不起作用
【发布时间】：2016-06-11 19:20:26
【问题描述】：

我正在学习javascript，并且我创建了这样的图像：

function placeThePawn(){
base_image = new Image();
base_image.src = 'pawns/pawn_red.png';
base_image.onload = function(){
    ctx.drawImage(base_image, 50, 50 , 32 , 32);
}
}

[我搜索并阅读了一些教程来学习如何移动棋子]

现在我做了一个函数来像这样移动棋子（图像）：

function moveThePawn() {
base_image.style.left = parseInt(base_image.style.left) + 100 + 'px';
}

不知怎的，它似乎不起作用。

我想知道如何实现这个（移动棋子）并且也想知道为什么这不起作用！

【问题讨论】：

您能提供一个带有您的代码的 jsfiddle 吗？
@DemeterDimitri 不确定“jsfiddle”是什么意思？你的意思是整个js文件？
jsfiddle.net ，我认为您需要重新绘制画布（ctx）。因为base_image不在画布中，只是一个图像对象（元素）。
@DemeterDimitri 不要建议 jsfiddle。建议代码 sn-ps。如果可以，请使用 Stack Overflow 中的工具。
@randy 如果我使用 var，该变量将是本地的，我根本无法在其他函数中使用它。

标签： javascript css image position move

【解决方案1】：

你必须调用函数movethePawn(); 把这个放在你的<body onkeyup="moveSelection(event)">

这在你的脚本中

function moveSelection(event) {                    
                if(event.keyCode === 37) {
                    movethePawn();
         }
       }

编辑 1：

您可能需要将此图像构造为 DOM 中的一个元素，并使用 document.getElementbyId 将该元素向左移动。它不能直接与 Image 对象一起使用

【讨论】：

我已经在单击按钮时调用了该函数。它被调用。我检查了日志。
请看编辑1

【解决方案2】：

此代码创建您的 pawn，并在两秒钟后仅使用您的函数移动它（以及一个 clearRect 以删除旧图标）

var base_image;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function placeThePawn(){
  base_image = new Image();
  base_image.src = 'http://placehold.it/200x200';
  base_image.onload = function(){
    ctx.drawImage(base_image, 50, 50 , 32 , 32);
  }
}

function moveThePawn() {
  ctx.clearRect(0,0,200,100);
    ctx.drawImage(base_image, 150, 50 , 32 , 32);
}

placeThePawn();

setTimeout(moveThePawn, 2000);

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

这是一个更好的例子：

var base_image;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

var clearMyCanvas = function(){ctx.clearRect(0,0,1000,1000)};

var pawn = {
  x:50,
  y:50,
  h:32,
  w:32,
  render: function placeThePawn(){
    base_image = new Image();
    base_image.src = 'http://placehold.it/200x200';
    base_image.onload = function(){
      ctx.drawImage(base_image, pawn.x, pawn.y , pawn.w , pawn.h);
    }
  }
}


pawn.render();

// redraw all the things you want on your next screen here.
setTimeout(function(){
  // clear canvas
  clearMyCanvas();
  // perform logics
  pawn.x += 100; 
  // redraw
  pawn.render()
}, 2000);

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

【讨论】：

感谢您的努力，但我想这对我的情况没有帮助。我想将我的棋子从一个地方移动到另一个地方（平稳移动）。我猜每次都清除画布并重新绘制它不是一个好主意。
@SrujanBarai 这就是游戏的运作方式。您将状态保存在对象中并绘制状态。永远不要反其道而行之。如果你让代码依赖于当前的图纸，它永远不会是好的代码。
好吧，我还在想什么，让我的板保持原样（因为它是静态的）并使用另一个 JavaScript 文件在其上绘制棋子，作为另一层。虽然我不知道这是否可能。想试一试。
当然可以。使每个 pawn 对象成为一个文件，使渲染另一个文件。以正确的顺序导入并为每个对象调用渲染 Every Move。
这对我来说听起来并不容易，但会尝试。 ty 至少可以指导。

【解决方案3】：

我认为您将 html5 画布元素（如 ctx.drawImage(base_image, 50, 50 , 32 , 32); 中所见）与简单的 html 和 css 混合在一起。

这一行：base_image.style.left = parseInt(base_image.style.left) + 100 + 'px'; 正在尝试更改保存在名为 base_image 的变量中的元素的 css 样式属性。但是没有这样的元素。

你需要改变的不是base_image的样式，而是画布上下文ctx，其中base_image已经被绘制了。

function moveThePawn() {
ctx.drawImage(base_image, 50, 50 , 32 , (32+100));//add the 100 pixels to the canvas rendering of the image
}

【讨论】：

太棒了！但它并没有移动对象，而是重绘它。所以现在我有两个棋子......
我无法为您提供更多帮助，因为我不知道您的所有棋子是否都绘制在一个画布上，或者您是否每个棋子都有一个画布。在第一种情况下，@randy 的答案会很有用，在第二种情况下，它更复杂。你需要存储你所做的每一个动作，以便以后可以撤消它们。