canvas是位图绘制环境，修改坐标变量后必须显式调用fillrect()等绘图命令重新绘制，否则画面不会自动刷新——这是初学者最常见的“变量变了但图形不动”的根本原因。
canvas是位图绘制环境，修改坐标变量后必须显式调用fillrect()等绘图命令重新绘制，否则画面不会自动刷新——这是初学者最常见的“变量变了但图形不动”的根本原因。
Canvas 与 DOM 元素不同，它不具备响应式数据绑定能力。你声明的 x 和 y 变量确实会随按键正确更新（正如 log() 弹窗所验证），但 ctx.fillRect(x, y, 100, 100) 仅在脚本首次执行时被调用一次，之后无论 x/y 如何变化，画布内容都保持静态。
✅ 正确做法是：将绘图操作封装进一个独立的 render() 函数，并在每次状态更新（如按键后）主动调用它，实现「更新状态 → 清空画布 → 重绘」的完整渲染循环。
以下是修复后的完整代码（关键改动已加注释）：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
<html>
<body>
<canvas id="canvasSpace" width="1460" height="710" style="border:2px solid #000000;"></canvas>
<script>
const canvas = document.getElementById("canvasSpace");
const ctx = canvas.getContext("2d");
let x = 735, y = 360;
// ✅ 将绘图逻辑提取为可复用函数
function render() {
// ⚠️ 必须先清空画布，避免残留旧图形（尤其移动时）
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; }
// ✅ 在事件处理中调用 render()，确保每次按键后重绘
document.addEventListener('keydown', function(event) {
if (event.keyCode === 37) { moveLeft(); }
if (event.keyCode === 38) { moveUp(); }
if (event.keyCode === 39) { moveRight(); }
if (event.keyCode === 40) { moveDown(); }
if (event.keyCode === 13) {
alert(`x = ${x}, y = ${y}`);
}
render(); // ? 核心修复：每次按键后立即重绘
});
// ✅ 首次渲染（否则初始方块不会出现）
render();
</script>
</body>
</html>? 重要注意事项：
- clearRect() 不可省略：若不清理，连续移动会产生拖影效果；
- 坐标系理解：Canvas 的 (0,0) 在左上角，y 增大表示向下移动，因此 moveUp() 应 y -= 10（原文本中 moveUp 错写为 y += 10，已修正）；
- 性能提示：实际项目中建议使用 requestAnimationFrame 替代事件内联 render()，实现更平滑的动画控制；
- 扩展性：后续添加更多图形或交互时，只需在 render() 中追加对应绘图语句即可。
掌握「状态 + 渲染分离」这一模式，是构建任何 Canvas 动画或交互应用的基础。
