求助：Canvas矩形无法通过箭头键左右移动的问题排查

你的代码里有两个核心问题导致矩形无法移动：

• 常量无法被修改：x、y用const声明，按键事件里尝试修改这些常量的操作会静默失败，需要改用let声明。
• 字符串数值引发计算错误：rectWidth、rectHeight是字符串类型（"50"），参与数值计算时会触发字符串拼接，比如x + rectWidth会变成数字+"50"，导致边界判断逻辑失效，需改为纯数值类型。

以下是修正后的完整代码：

JavaScript代码 #

const game = document.getElementById("game");
const context = game.getContext("2d");

// 改为数值类型，用let声明可修改变量
let rectWidth = 50;
let rectHeight = 50;
let x = (game.width - rectWidth) / 2;
let y = game.height - rectHeight;

function drawRectangle() {
  context.clearRect(0, 0, game.width, game.height); // 清空画布
  context.fillStyle = "blue";
  context.fillRect(x, y, rectWidth, rectHeight);
}

document.addEventListener("keydown", (event) => {
  const speed = 20;

  // 左右移动逻辑
  if (event.key === "ArrowLeft" && x > 0) {
    x -= speed;
  }
  if (event.key === "ArrowRight" && x + rectWidth < game.width) {
    x += speed;
  }
  // 添加上下移动逻辑
  if (event.key === "ArrowUp" && y > 0) {
    y -= speed;
  }
  if (event.key === "ArrowDown" && y + rectHeight < game.height) {
    y += speed;
  }
  drawRectangle();
});

drawRectangle();

HTML代码 #

<canvas style="border-style:dashed" width="1000" height="500" id="game"></canvas>

关键修正说明 #

1. 将x、y、rectWidth、rectHeight改为let声明，确保变量可被修改，同时把尺寸值从字符串改为纯数字，避免计算错误。
2. 保留了左右移动的边界判断，确保矩形不会移出画布范围；同时补充了上下移动的逻辑，你可以根据需求调整或移除。
3. 按键事件触发后重新调用drawRectangle()，实时更新画布上的矩形位置。

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