为何Canvas文本未按预期变为'Testinghi'？

我仔细看了你的代码和遇到的问题，发现几个关键问题导致按键后文本没有更新，咱们一步步来解决：

1. 键盘事件名称拼写错误 #

你写的keyUp是错误的——JavaScript的键盘事件名称是全小写的keyup，事件名区分大小写，所以这个监听器根本没被正确绑定，自然不会触发回调函数。

2. Canvas 默认无法获取焦点 #

Canvas元素默认不具备焦点能力，哪怕绑定了键盘事件，按键操作也不会被捕获。你需要给Canvas添加tabindex属性让它能被聚焦：

<canvas id="canvas" tabindex="0"></canvas>

同时在代码里让页面加载后自动让Canvas获取焦点：

document.getElementById('canvas').focus();

3. 变量更新后未重新绘制文本 #

当你修改rightMoveControl的值后，并没有重新执行绘制文本的逻辑，页面上的旧内容不会自动刷新。你需要把绘制代码封装成独立函数，每次变量变化后调用它重新渲染。

修正后的核心代码示例 #

// 全局变量定义
let rightMoveControl = '';
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let options = true; // 假设你的options变量是控制显示的开关

// 封装绘制控制界面的函数
function drawControlUI() {
  if (!options) return;
  
  // 先清除画布，避免新旧文本重叠
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  ctx.font = '18px Arial';
  ctx.fillStyle = 'black';
  ctx.fillText('Controls (Click On Control/Key Then Press The Key You Want)', 5, 30);
  ctx.fillText('Right Move:', 10, 70);
  ctx.fillText('Testing' + rightMoveControl, 120, 70);
  ctx.fillText('Left Move:', 10, 110);
  ctx.fillText('Left Arrow', 110, 110);
}

// 正确绑定keyup事件
canvas.addEventListener('keyup', rightControlHandler, false);

function rightControlHandler(event) {
  rightMoveControl = 'hi';
  // 更新变量后立即重新绘制
  drawControlUI();
}

// 页面初始化
window.onload = function() {
  canvas.focus();
  drawControlUI();
};

额外提醒 #

• 不要把事件监听器和函数定义放在if(options)块内，否则可能出现重复绑定或初始化失败的问题；
• 每次绘制前用clearRect清除画布区域，避免文本叠加显示。

内容的提问来源于stack exchange，提问作者Aarav Shah