使用键码移动画布 - JAVASCRIPT [重复]

【问题标题】：Move a canvas with keycode - JAVASCRIPT [duplicate]使用键码移动画布 - JAVASCRIPT [重复]
【发布时间】：2016-05-02 23:02:16
【问题描述】：

我对 javascript 很陌生。在谷歌的帮助下，我写了这个。我不知道为什么，但是当我按“A”或“D”键时，什么都没有发生。我只是不知道为什么，对我来说这一切都很完美。你能帮帮我吗？

canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
var X = 50;
var Y = 50;
var WIDTH = 35;
var HEIGHT = 35;
ctx.fillStyle = "#FF0000";
ctx.fillRect(X,Y,WIDTH,HEIGHT);
document.addEventListener("keydown", draw);
function draw(e){
    switch(e.which || e.keyCode){
        case 68:
            x += 5;
            break;
        case 65:
            x -= 5;
            break;
  }
  ctx.clear();
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(X,Y,WIDTH,HEIGHT);
}

和 HTML：

<canvas id="canvas" width="350px" height="500px"></canvas>

如果有帮助，这里有一个小提琴。 https://jsfiddle.net/Scrubben/gmd537k1/26/

【问题讨论】：

标签： javascript canvas

【解决方案1】：

这是工作代码。确保 JavaScript 区分大小写。所以var X !== x。并使用ctx.clearRect(0, 0, canvas.width, canvas.height); 而不是ctx.clear()

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
var x = 50;
var y = 50;
var WIDTH = 35;
var HEIGHT = 35;
ctx.fillStyle = "#FF0000";
ctx.fillRect(x, y, WIDTH, HEIGHT);
document.addEventListener("keydown", draw);

function draw(e) {
  switch (e.which || e.keyCode) {
    case 68:
      x += 5;
      break;
    case 65:
      x -= 5;
      break;
  }
  // ctx.clear();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(x, y, WIDTH, HEIGHT);
}

#canvas {
  border: 2px solid black;
}

&lt;canvas id="canvas" width="500px" height="500px"&gt;&lt;/canvas&gt;

【讨论】：

很好，谢谢！