javascript - 带箭头移动 Canvas 框

Question

我一直在尝试使用箭头键移动一个简单的 Canvas 框。这是代码:http://cssdeck.com/labs/stexplorer

这里还有:

$(function() {
  var n = 3;
  var xD = 0;
  var yD = 0;
  //var move;
	var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  var ss = {
    "x": 0,
    "y": 0,
    "width": 100,
    "height": 75
  };

  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
	  ctx.beginPath();
	  ctx.rect(ss.x, ss.y, ss.width, ss.height);
	  ctx.lineWidth = 1;
	  ctx.strokeStyle = "black";
	  ctx.stroke();
  }

  function move() {
		x = ss.x + (xD * n);
		y = ss.y + (yD * n);
    ss.x = x;
    ss.y = y;
	}

  $(document).keydown(function(e) {
		xD = e.which == 37 ? -1 : xD;
		xD = e.which == 39 ? 1 : xD;
		yD = e.which == 38 ? -1 : yD;
		yD = e.which == 40 ? 1 : yD;
		e.preventDefault();
	});

  $(document).keyup(function(e) {
		xD = e.which == 37 ? 0 : xD;
		xD = e.which == 39 ? 0 : xD;
		yD = e.which == 38 ? 0 : yD;
		yD = e.which == 40 ? 0 : yD;
		e.preventDefault();
	});

  render();
  setInterval(move, .01);
});

body {
	margin: 0;
}

#canvas {
	border: 1px solid #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="300" height="200"></canvas>

这段代码应该执行以下操作:

• 每当我按下箭头键时，该框就会移动
• 如果我可以制作 Canvas width = "100vw" 和 height = "100vh"

Answer 1

您的渲染方法只会在最初被触发，您应该将其添加为移动方法的最后一行，以便 Canvas 在每次移动后渲染新位置。

function move() {
    x = ss.x + (xD * n);
    y = ss.y + (yD * n);
    ss.x = x;
    ss.y = y;
    render(); // add this line
}