在Canvas中，fillRect()仅执行一次绘制操作；修改坐标变量后若不重新调用该方法，画面不会自动更新——这是初学者常见误区。

在canvas中，`fillrect()`仅执行一次绘制操作；修改坐标变量后若不重新调用该方法，画面不会自动更新——这是初学者常见误区。

Canvas 是基于位图的即时渲染（Immediate Mode）绘图 API，它不具备“场景树”或“状态绑定”机制。一旦 ctx.fillRect(x, y, 100, 100) 执行完成，图形就被绘制到画布的像素缓冲区中，后续对 x 或 y 变量的修改不会触发重绘——就像修改一个已打印文档里的变量名，不会自动重印文档一样。

你的代码中，fillRect 仅在脚本初始化时调用了一次：

let x = 735, y = 360;
ctx.fillRect(x, y, 100, 100); // ✅ 绘制一次，之后不再执行

尽管 moveLeft()、moveUp() 等函数正确更新了 x 和 y（你通过 log() 验证了这一点），但缺少关键步骤：每次坐标变更后，必须主动清空画布并重新绘制方块。

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

✅ 正确做法是将绘制逻辑封装为独立函数，并在每次按键响应后调用：

const canvas = document.getElementById("canvasSpace");
const ctx = canvas.getContext("2d");
let x = 735, y = 360;

// 封装绘制逻辑
function draw() {
  // 清空整个画布（关键！否则会残留旧位置的方块）
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 用当前 x/y 绘制方块
  ctx.fillRect(x, y, 100, 100);
}

// 移动函数（仅更新坐标）
function moveLeft() { x -= 10; }
function moveUp() { y -= 10; } // ⚠️ 注意：Canvas Y轴向下为正，向上移动应减小y
function moveRight() { x += 10; }
function moveDown() { y += 10; }

// 键盘事件处理：更新 + 重绘
document.addEventListener('keydown', function(event) {
  switch(event.keyCode) {
    case 37: moveLeft(); break;
    case 38: moveUp();   break;
    case 39: moveRight(); break;
    case 40: moveDown(); break;
    case 13: console.log(`x=${x}, y=${y}`); break; // 推荐用 console.log 替代 alert
  }
  draw(); // ✅ 每次按键后立即重绘
});

// 首次绘制
draw();

? 关键注意事项：

• clearRect() 必须在每次 fillRect() 前调用，否则方块会“拖影”（历史位置残留）；
• Canvas 坐标系原点在左上角，y 值增大表示向下移动——因此 moveUp() 应为 y -= 10（原代码中 moveUp() 错误地写了 y += 10）；
• 建议使用 event.code（如 'ArrowLeft'）替代已废弃的 keyCode，提升可读性与兼容性；
• 实际项目中可进一步封装为游戏循环（如 requestAnimationFrame），实现更平滑的动画效果。

掌握“清空→更新→重绘”这一三步模式，是驾驭 Canvas 动态交互的基础。