为什么文本没有像应有的那样更改为“Testinghi”？答案

【问题标题】：Why does the text not change to 'Testinghi' like it should?为什么文本没有像应有的那样更改为“Testinghi”？
【发布时间】：2018-05-17 18:50:34
【问题描述】：

代码：

这不是我的全部代码，但它包含有问题的部分

if (options) {
  ctx.font = '18px Arial';
  ctx.fillStyle = 'black';
  ctx.fillText('Controls (Click On Control/Key Then Press The Key You Want)', 5, 30);
  ctx.font = '18px Arial';
  ctx.fillText('Right Move:', 10, 70);
  ctx.fillText('Testing' + rightMoveControl, 120, 70);
  ctx.fillText('Left Move:', 10, 110);
  ctx.fillText('Left Arrow', 110, 110)
}
if (options) {
  //canvas.addEventListener("keydown", rightControlHandler);
  document.getElementById('canvas').addEventListener("keyUp", rightControlHandler, false);

  function rightControlHandler(event) {
    /*ctx.font = '18px Arial';
    ctx.fillStyle = 'black';
    ctx.fillText('Testinghi', 120, 70);*/
    rightMoveControl = 'hi';
  }
}

问题：

当我在画布上按下一个键时，文本保持为Testing 并且不会更改为Testinghi。完整代码和测试的链接是这样的：https://jsfiddle.net/aarav18/qj9fkzpn/

我希望有人可以帮助我:)

【问题讨论】：

rightMoveControl 定义在哪里？
我在代码的顶部定义了我的所有变量，尽管我没有在这里显示它，因为这样扫描整个代码会很乏味。
更改变量的值不会使ctx.fillText 再次发生
所有的代码都在一个循环中重复运行，所以下次循环运行时不应该改变值吗？
没关系，但这已经是一个“复杂”的游戏，是什么阻止你实施这个“较小”的变化？是你的代码开始吗？

标签： javascript html html5-canvas keyevent

【解决方案1】：

我建议在draw() 之外添加事件侦听器，每次调用draw() 时都会创建更多相同的事件并多次运行相同的代码。 https://jsfiddle.net/jr5dvmw3/2/（检查您的 f12 控制台并单击画布）

在这种情况下，您需要将事件侦听器附加到 document，然后在侦听器内部执行 if(options) 检查

document.addEventListener("keydown", rightControlHandler, false);
function rightControlHandler(e) {
  if (options) {
    rightMoveControl = 'hi';
  }
}


function draw() {
  //Updates Game
...

【讨论】：

基本信息难道不是他应该将 keydown/keyup 事件添加到文档而不是画布（尽管应该在绘图功能之外完成它当然是正确的）跨度>