如何将HTML Canvas转为图像并放大绘制到画布上解决缩放失效问题

代码失效原因 #

putImageData() 方法不支持缩放操作，该方法的最后两个参数仅用于指定源图像数据的裁剪范围，写入画布时会严格按照1:1的像素对应关系渲染，因此无法实现尺寸放大效果。

推荐实现方案 #

方案1：CSS缩放（最简实现，适配成本最低） #

不需要修改任何游戏渲染逻辑，仅通过CSS调整canvas元素的显示尺寸即可实现放大：

/* 假设canvas原有属性为 width="300" height="500" */
#gameCanvas {
  width: 360px;
  height: 600px;
  /* 像素风游戏可添加以下属性避免放大后边缘模糊 */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

注意事项：使用该方案时，鼠标/触摸交互的事件坐标需要按缩放比例（当前示例为1.2倍）换算为画布逻辑坐标，避免交互错位。

方案2：drawImage离屏缩放（无逻辑修改，渲染效果可控） #

适合不想调整原有游戏逻辑、同时不想处理交互坐标换算的场景：

// 1. 创建离屏画布，尺寸和原有游戏的逻辑尺寸完全一致
const offscreen = document.createElement('canvas');
offscreen.width = 300;
offscreen.height = 500;
const offscreenCtx = offscreen.getContext('2d');

// 2. 将原有游戏的渲染上下文替换为离屏上下文，原有渲染逻辑完全不变
// 原：const ctx = canvas.getContext('2d')
// 替换为：const ctx = offscreenCtx

// 3. 每帧渲染完成后，将离屏内容缩放绘制到实际展示的主画布
const mainCtx = document.querySelector('#gameCanvas').getContext('2d');
mainCtx.drawImage(offscreen, 0,0,300,500, 0,0,360,600);

方案3：上下文全局缩放（画质最优） #

适合需要放大后依然保持高清渲染的场景，仅需要在初始化时添加缩放配置，原有渲染逻辑不需要修改：

const canvas = document.querySelector('#gameCanvas');
const ctx = canvas.getContext('2d');
const scale = 1.2; // 放大倍数
// 调整画布实际像素尺寸
canvas.width = 300 * scale;
canvas.height = 500 * scale;
// 设置全局缩放，后续所有绘制操作会自动按比例放大
ctx.scale(scale, scale);

// 后续原有游戏渲染逻辑完全不变，所有坐标依然按照300*500的逻辑值编写即可

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