调整Canvas尺寸后上下文状态丢失，求高效恢复方案

这确实是Canvas开发里一个容易踩的坑！问题出在修改canvas.width或height时，浏览器会彻底重置整个绘图上下文——不仅清空画布内容，就连ctx.save()存在栈里的所有状态也会被完全清除，所以你之前的save()+restore()组合根本起不了作用，因为尺寸修改后状态栈已经是空的了。

下面给你两种更高效的解决方案，替代手动逐个复制属性的繁琐操作：

方案1：封装状态保存/恢复工具函数 #

我们可以把常用的上下文状态封装成两个函数，批量保存和恢复，这样既简洁又不容易遗漏：

// 批量保存Canvas上下文的关键状态
function saveCanvasState(ctx) {
  return {
    fillStyle: ctx.fillStyle,
    strokeStyle: ctx.strokeStyle,
    globalAlpha: ctx.globalAlpha,
    lineWidth: ctx.lineWidth,
    lineCap: ctx.lineCap,
    lineJoin: ctx.lineJoin,
    miterLimit: ctx.miterLimit,
    lineDashOffset: ctx.lineDashOffset,
    shadowOffsetX: ctx.shadowOffsetX,
    shadowOffsetY: ctx.shadowOffsetY,
    shadowBlur: ctx.shadowBlur,
    shadowColor: ctx.shadowColor,
    globalCompositeOperation: ctx.globalCompositeOperation,
    transform: ctx.getTransform(), // 保存当前变换矩阵
  };
}

// 批量恢复Canvas上下文状态
function restoreCanvasState(ctx, state) {
  ctx.fillStyle = state.fillStyle;
  ctx.strokeStyle = state.strokeStyle;
  ctx.globalAlpha = state.globalAlpha;
  ctx.lineWidth = state.lineWidth;
  ctx.lineCap = state.lineCap;
  ctx.lineJoin = state.lineJoin;
  ctx.miterLimit = state.miterLimit;
  ctx.lineDashOffset = state.lineDashOffset;
  ctx.shadowOffsetX = state.shadowOffsetX;
  ctx.shadowOffsetY = state.shadowOffsetY;
  ctx.shadowBlur = state.shadowBlur;
  ctx.shadowColor = state.shadowColor;
  ctx.globalCompositeOperation = state.globalCompositeOperation;
  ctx.setTransform(state.transform); // 恢复变换矩阵
}

// 调整尺寸并自动恢复状态的函数
function resizeCanvas(newWidth, newHeight) {
  const state = saveCanvasState(ctx);
  // 可选：如果需要保留画布上的现有内容，先保存ImageData
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  
  // 重置画布尺寸（这一步会清空上下文所有状态）
  canvas.width = newWidth;
  canvas.height = newHeight;
  
  // 先恢复上下文状态
  restoreCanvasState(ctx, state);
  // 可选：恢复之前的画布内容
  ctx.putImageData(imageData, 0, 0);
}

方案2：用离屏Canvas保存内容+状态（适合需要保留绘制结果的场景） #

如果你不仅要恢复上下文状态，还要保留画布上已有的图形，可以用一个临时的离屏Canvas来中转内容：

function resizeCanvas(newWidth, newHeight) {
  // 创建离屏Canvas，复制当前画布的内容
  const offscreenCanvas = document.createElement('canvas');
  const offscreenCtx = offscreenCanvas.getContext('2d');
  offscreenCanvas.width = canvas.width;
  offscreenCanvas.height = canvas.height;
  offscreenCtx.drawImage(canvas, 0, 0);
  
  // 保存当前上下文状态
  const state = saveCanvasState(ctx);
  
  // 调整主画布尺寸
  canvas.width = newWidth;
  canvas.height = newHeight;
  
  // 恢复上下文状态
  restoreCanvasState(ctx, state);
  // 把离屏Canvas的内容画回主画布（可按需调整位置或缩放）
  ctx.drawImage(offscreenCanvas, 0, 0);
}

额外注意 #

• 如果你用了ctx.clip()设置裁剪路径，这种方法没法直接恢复裁剪状态——因为裁剪路径没有公开的API可以直接获取，你需要手动记录裁剪的路径数据，在恢复状态时重新调用clip()。
• 变换矩阵用getTransform()和setTransform()来处理，比手动记录translate/rotate/scale的参数更准确，尤其是叠加了多次变换的场景。

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