Question

这是我的代码：

var ctx = document.getElementById("map").getContext("2d");
var ZeroX = 0;
var ZeroY = 0;
ctx.beginPath();
ctx.fillRect(100, 200, 100, 50); //Drawed a black rectangle

	function moveMap(evt) {
	  var key = evt.keyCode || evt.which;
	  if (key == 38) { //UP
	    moveDirect(0, 20, false);
	  }
	  else if (key == 40) { //DOWN
	    moveDirect(0, 20, true);
	  }	  
	  else if (key == 39) { //RIGHT
	    moveDirect(20, 0, true);
	  }
	  else if (key == 37) { //LEFT
	    moveDirect(20, 0, false);
	  }
	}
	
	function moveDirect(X, Y, minus) {	
	  if (minus == false) {
	    ZeroX -= X;
	    ZeroY -= Y;		
	  }
	  else {
	    ZeroX += X;
		ZeroY = Y;	
	  }	  
	  var lol = ctx.getImageData(ZeroX, ZeroY, 3000, 3000);		  
	  ctx.clearRect(ZeroX, ZeroY, 3000, 3000);
	  ctx.putImageData(lol, 0, 0);
	}

  <body onkeypress="moveMap(event)">
<canvas id="map" width="500" height="500">Map </canvas>
  </body>

如果您运行此代码段并单击键盘上的其中一个箭头，您会看到矩形在相反方向移动方向，因为我想使屏幕像一个相机在一个游戏。这是故意的
但是如果你点击了箭头的对手（Up = Down，Left = Right，等），您将看到必须单击两次才能移入另一个方向。尝试使用其他箭头，仍然相同。
如果你多次按同一个箭头，它的间隙就会变成越来越大，但逻辑上它必须相同。

我希望它直接回复，而不是两次点击，而且差距总是相同的。请在你的答案中解释为什么会发生这种情况。事先要多克斯！

bizzare putImageData action

0 个答案: