如何使用JavaScript为canvas设置移动边界，避免可移动角色超出画布范围

实现思路 #

• 首先获取canvas元素的边界尺寸，作为角色移动的限制范围
• 每次按键计算移动后的坐标时，先判断是否超出边界，只有未超出时才更新位置
• 修复原代码重复绑定keydown事件的问题：原代码把addEventListener放在1ms执行一次的setInterval里，会导致同一个事件绑定上万次引发性能问题，直接把事件绑定移到全局执行一次即可

修改后的完整JavaScript代码 #

// 提前定义固定尺寸，后续调整样式时同步修改这里即可
const CHAR_WIDTH = 12 // 对应CSS里的角色宽度
const CHAR_HEIGHT = 12 // 对应CSS里的角色高度
const MOVE_STEP = 10 // 每次按键移动的步长

function place(id, x_pos, y_pos) {
  const element = document.getElementById(id);
  element.style.position = "absolute";
  element.style.left = x_pos + 'px';
  element.style.top = y_pos + 'px';
}

function keyPress(e) {
  const keyCode = e.keyCode;
  // 实时获取角色和canvas的边界坐标
  const charRect = document.getElementById("character").getBoundingClientRect();
  const canvasRect = document.getElementById("canvas").getBoundingClientRect();
  
  let newLeft = parseInt(charRect.left, 10);
  let newTop = parseInt(charRect.top, 10);

  // 计算移动后的目标坐标
  switch (keyCode) {
    case 37: // 左方向键
      newLeft -= MOVE_STEP;
      break;
    case 39: // 右方向键
      newLeft += MOVE_STEP;
      break;
    case 38: // 上方向键
      newTop -= MOVE_STEP;
      break;
    case 40: // 下方向键
      newTop += MOVE_STEP;
      break;
    default:
      // 非方向键不处理
      return;
  }

  // 边界校验，超出范围则修正坐标
  // 左边界限制
  if (newLeft < canvasRect.left) newLeft = canvasRect.left;
  // 右边界限制：角色右边缘不能超过canvas右边缘
  if (newLeft + CHAR_WIDTH > canvasRect.right) newLeft = canvasRect.right - CHAR_WIDTH;
  // 上边界限制
  if (newTop < canvasRect.top) newTop = canvasRect.top;
  // 下边界限制：角色下边缘不能超过canvas下边缘
  if (newTop + CHAR_HEIGHT > canvasRect.bottom) newTop = canvasRect.bottom - CHAR_HEIGHT;

  // 用修正后的坐标更新角色位置
  place('character', newLeft, newTop);
}

// 全局只绑定一次事件即可，不需要重复绑定
document.addEventListener('keydown', keyPress);

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