Question

我正在学习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);
}
}

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

现在我做了一个像这样移动pawn（图像）的函数：

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

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

我想知道如何实现这一点（移动pawn）和也想知道为什么这不起作用！

Answer 1

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

中有这个

并在您的脚本中

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

编辑1：

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

这是如何执行此操作的更好示例：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我认为你将html5 canvas元素（如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
}

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

3 个答案: