如何无模糊缩放HTML Canvas？兼顾游戏坐标计算需求

我正在开发一款小型浏览器游戏，地图尺寸为300x300，因此将HTML canvas的宽高设置为300x300。生成中心物体时使用坐标150, 150，物理计算也采用适配该尺寸的静态单位。

但部分用户屏幕尺寸差异较大，需要缩放canvas以适配不同屏幕。若修改canvas实际分辨率，会打乱所有计算：150x150不再是中心，物体移动速度也会出现异常。因此考虑保留canvas分辨率为300x300，仅通过CSS缩放，示例代码如下：

<canvas width="300" height="300"></canvas>

canvas { border: 1px solid #333; }

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

canvas.style.width = "600px";
canvas.style.height = "600px";

ctx.fillStyle = 'red';

ctx.font = "600 48px Arial";
ctx.fillText("hello", 150, 150);

但此方法会导致画面模糊。请问是否存在既能无模糊缩放画布，又能继续使用150x150这类静态值指代中心的方案？

画布缩放处理 #

通过Canvas 2D上下文的scale方法实现无模糊缩放，同时保持游戏逻辑全程使用原始尺寸单位：

export function resize2DContext(context, canvasWidth, canvasHeight) {
  // 重置变换矩阵，避免叠加缩放导致异常
  context.setTransform(1, 0, 0, 1, 0, 0);

  const canvas = context.canvas;
  // 游戏原始尺寸（对应你的300x300地图）
  const gameWidth = 300;
  const gameHeight = 300;

  // 设置canvas在页面中的显示尺寸
  canvas.style.width = canvasWidth + "px";
  canvas.style.height = canvasHeight + "px";
  
  // 设置canvas的实际像素分辨率，保证画面清晰
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  // 按比例缩放绘图上下文，后续所有绘制操作自动适配显示尺寸
  context.scale(canvasWidth / gameWidth, canvasHeight / gameHeight);
}

输入事件坐标转换 #

用户交互的屏幕坐标需要转换回游戏原始尺寸单位，避免点击/触摸位置错位：

// 全局或模块级变量存储游戏原始尺寸和canvas当前显示尺寸
const gameWidth = 300;
const gameHeight = 300;
let canvasWidth = 300;
let canvasHeight = 300;

function handlePointerMove(e) {
  // 计算屏幕坐标到游戏原始坐标的转换比例
  const xRatio = gameWidth / canvasWidth;
  const yRatio = gameHeight / canvasHeight;

  // 将屏幕坐标转换为游戏逻辑使用的原始尺寸坐标
  pointerX = e.offsetX * xRatio;
  pointerY = e.offsetY * yRatio;
}

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