JavaScript/CSS实现Canvas按原生尺寸缩放适配窗口并居中

核心思路 #

保持Canvas原生尺寸为1440px×900px，通过CSS缩放实现窗口适配（优先以高度填满窗口，当按高度缩放后宽度超出窗口时，切换为以宽度填满窗口），同时通过绝对定位+transform实现居中。关键是让相机始终保持原生画布的比例，避免渲染内容变形。

完整实现代码 #

初始化阶段

// 原生画布尺寸常量
const CANVAS_WIDTH = 1440;
const CANVAS_HEIGHT = 900;

// 初始化渲染器，固定原生尺寸
renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
weaponRenderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);

// 锁定相机比例为原生画布比例，防止内容变形
camera.aspect = CANVAS_WIDTH / CANVAS_HEIGHT;
camera.updateProjectionMatrix();
weaponCamera.aspect = CANVAS_WIDTH / CANVAS_HEIGHT;
weaponCamera.updateProjectionMatrix();

// 设置Canvas基础样式，用于后续居中
const setupCanvasStyle = (canvas) => {
  canvas.style.position = 'absolute';
  canvas.style.top = '50%';
  canvas.style.left = '50%';
  canvas.style.transformOrigin = 'center center';
  canvas.style.imageRendering = 'pixelated'; // 可选，保留像素质感，不需要可删除
};
setupCanvasStyle(renderer.domElement);
setupCanvasStyle(weaponRenderer.domElement);

// 初始执行一次适配
onWindowResize();

窗口resize处理函数

window.addEventListener("resize", onWindowResize);
function onWindowResize() {
  // 计算高度、宽度方向的缩放比例
  const heightScale = window.innerHeight / CANVAS_HEIGHT;
  const widthScale = window.innerWidth / CANVAS_WIDTH;
  
  // 高度优先适配逻辑：优先用高度比例，若此时宽度超出窗口则切换为宽度比例
  let scale;
  if (CANVAS_WIDTH * heightScale <= window.innerWidth) {
    scale = heightScale;
  } else {
    scale = widthScale;
  }

  // 应用缩放与居中变换
  renderer.domElement.style.transform = `scale(${scale}) translate(-50%, -50%)`;
  weaponRenderer.domElement.style.transform = `scale(${scale}) translate(-50%, -50%)`;
}

关键细节说明 #

• 固定原生画布尺寸：renderer.setSize直接设置为1440×900，确保渲染精度不受窗口缩放影响。
• 相机比例锁定：相机aspect始终使用原生画布的宽高比，避免窗口缩放导致渲染内容拉伸变形。
• 缩放逻辑：优先以高度填满窗口，仅当按高度缩放后画布宽度超过窗口时，才切换为以宽度适配，完全符合“高度优先”的需求。
• 居中实现：通过position: absolute+top/left: 50%+transform: translate(-50%, -50%)实现缩放后的画布在窗口中精准居中。

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