如何在Canvas中移动元素而无需用clearRect清空全部画布内容

很多人会以为save()和restore()能实现分层擦除，其实完全不是。这两个方法只是用来操作Canvas的绘图状态栈：调用save()会把当前的填充色、线条宽度、坐标变换、裁剪规则这些配置压进栈存起来，restore()就是把栈顶的配置弹出来恢复。两个方法从头到尾都不会修改已经画到画布上的像素，根本实现不了“单独擦掉红色方块、留着背景”的效果。
Canvas本质是单图层的位图表面，没有原生的对象分层能力——你一旦把内容画上去，所有像素都会和背景混在一起，根本没法单独把之前画的红色方块“抠”出来。所以要移动元素还不破坏背景，根本没有什么特殊的擦除魔法，核心逻辑就是状态驱动的重绘。

要做到不调用clearRect()清全屏也能移动元素，只要守住两个要求：

• 独立保留干净的背景图源：别把主画布上画好的内容当背景备份，毕竟主画布上还混着红色方块的像素，根本取不出不带方块的完整背景
• 每次要移动方块时，先把干净的完整背景重新铺到主画布上——这一步会自动把上一帧留在旧位置的红色方块盖住；接着再在新的坐标位置画红色方块就行，全程不需要主动擦除任何内容。

原示例代码存在执行顺序的bug：把红色方块的绘制放在window.onload里，很可能早于背景图加载完成执行，等图片加载完成再绘制背景时，会直接把之前画好的红色方块盖住。修正后的代码如下：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// 独立存储背景图源，和主画布内容解耦
const bgImage = new Image();
bgImage.src = 'https://image.freepik.com/free-vector/silhouette-forest-background_8589-304.jpg';
// 存储红色方块的动态状态：位置、尺寸
const movableBlock = {
  x: 20,
  y: 300,
  size: 60
}

// 封装统一的场景重绘方法
function renderScene() {
  // 第一步：重绘完整背景，自动覆盖旧位置的方块
  ctx.drawImage(bgImage, 0, 0, canvas.width, canvas.height);
  // 第二步：在最新的方块位置绘制图形
  ctx.fillStyle = 'red';
  ctx.fillRect(movableBlock.x, movableBlock.y, movableBlock.size, movableBlock.size);
}

// 背景图加载完成后，初始化第一次渲染
bgImage.onload = function() {
  renderScene();
}

// 示例：用方向键控制方块移动
window.addEventListener('keydown', (e) => {
  const moveStep = 10;
  switch(e.key) {
    case 'ArrowUp': movableBlock.y -= moveStep; break;
    case 'ArrowDown': movableBlock.y += moveStep; break;
    case 'ArrowLeft': movableBlock.x -= moveStep; break;
    case 'ArrowRight': movableBlock.x += moveStep; break;
  }
  // 位置更新后重新渲染全场景
  renderScene();
})

如果背景图尺寸很大，每次全图重绘的性能开销比较高，可以把背景单独存在一个离屏Canvas中，需要覆盖旧方块位置时，只把离屏Canvas上对应旧方块大小的像素区域贴回主画布，减少需要处理的像素量，本质逻辑和全图重绘是一致的，只是缩小了重绘的范围。

补充说明：save()和restore()可以在这个流程里辅助使用——比如绘制方块时如果临时修改了填充颜色、坐标偏移等绘图配置，在修改前调用save()，绘制完方块调用restore()，就能让后续的绘图状态回到之前的配置，不会被临时修改的参数影响，这个作用和元素移动的核心逻辑是独立的。

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