通过 JavaScript 使用 Canvas，如何使对象通过箭头键移动？答案

【问题标题】：Using Canvas via JavaScript, how can I make an object move via arrow keys?通过 JavaScript 使用 Canvas，如何使对象通过箭头键移动？
【发布时间】：2019-03-14 17:48:34
【问题描述】：

我刚开始做一个游戏，我正在尝试为一个有趣的小项目做。我还是画布的新手，只是想知道如何通过箭头键使这个红色方块移动？我了解keyupevent，但不完全确定如何将它与画布合并。提前致谢

<canvas id="myCanvas" height="400" width="400" style="border: 1px solid black"></canvas>

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.translate(120,120);
ctx.lineTo(0,0);
ctx.lineTo(160,0);
ctx.lineTo(160,160);
ctx.lineTo(0,160);
ctx.lineTo(0,0);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();

document.addEventListener('keydown', function(event) {
console.log(event.keyCode);
if (event.keyCode == 37) {
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.translate(0,0);
}

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

我已将您绘制的形状放入一个函数中，以便在您按下按键清除画布后再次调用它。此外，由于您正在翻译上下文，因此您需要从 (-120, -120) 中清除。我希望它有所帮助。

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");

ctx.translate(120,120);
myShape()

document.addEventListener('keydown', function(event) {
console.log(event.keyCode);
if (event.keyCode == 37) {
  ctx.clearRect(-120, -120, canvas.width + 120, canvas.height + 120);
  ctx.translate(-120,-120);
  myShape()
}});


function myShape(){
ctx.beginPath();
ctx.lineTo(0,0);
ctx.lineTo(160,0);
ctx.lineTo(160,160);
ctx.lineTo(0,160);
ctx.lineTo(0,0);
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();}

&lt;canvas id="myCanvas" height="400" width="400" style="border: 1px solid black"&gt;&lt;/canvas&gt;

【讨论】：

【解决方案2】：

首先：您必须在每次发生更改时重新渲染画布（至少是更改的部分）。
其次，尽管在您按住按钮时 keydown 会重新触发，但您需要更一致的更新周期；比如requestAnimationFrame 或setInterval。稍后，您还可以通过考虑自上次函数调用/更新以来的时间来解释这些间隔中的小不一致。
然后你会想要引入一个 keyState 来存储多个按钮的当前状态，这样你就可以在实际的 keydown/keyup 事件之外检查它。
```
const isKeyDown = {};
document.onkeydown = document.onkeyup = function(e){ 
    isKeyDown[e.which] = isKeyDown[e.key] = e.type === "keydown";
};
```
作为第二步，您可以通过摩擦力或重力将速度引入对象。因此，您按下的按钮不会确定实际的运动，而是对对象的当前运动“施加作用力”。

【讨论】：

您能否给我看一个上面的代码示例？