实现居中PixiJS画布及内容的等比例动态缩放

我帮你梳理下实现这个需求的最佳方案，不用媒体查询也能完美搞定，核心是通过动态计算缩放比例来适配窗口，同时满足你的所有要求：

我们放弃媒体查询，改用监听窗口resize事件+动态计算缩放比例的方式：

1. 始终以画布原始尺寸为基准，只放大不缩小（用Math.max限制缩放比例≥1）
2. 横屏状态下（窗口宽高比大于画布宽高比），按窗口高度铺满，保证画布占满整个屏幕
3. 竖屏状态下，按窗口宽度缩放但不小于原始尺寸，同时保持画布居中
4. 用容器+transform实现精准居中，避免布局偏移

HTML结构 #

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PixiJS Responsive Canvas</title>
</head>
<body>
  <div class="pixi-container"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.2.4/pixi.min.js"></script>
</body>
</html>

CSS样式 #

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #000; /* 背景色可自定义 */
}

.pixi-container {
  position: relative;
  /* 这里设置你的画布原始尺寸 */
  width: 800px;
  height: 600px;
}

.pixi-container canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 保持像素清晰，游戏场景推荐开启 */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

JavaScript逻辑 #

// 替换成你的画布原始尺寸
const CANVAS_WIDTH = 800;
const CANVAS_HEIGHT = 600;

// 初始化Pixi应用
const app = new PIXI.Application({
  width: CANVAS_WIDTH,
  height: CANVAS_HEIGHT,
  backgroundColor: 0x1099bb,
});
document.querySelector('.pixi-container').appendChild(app.view);

// 测试用图形（可替换成你的游戏内容）
const testBox = new PIXI.Graphics();
testBox.beginFill(0xff0000);
testBox.drawRect(50, 50, CANVAS_WIDTH - 100, CANVAS_HEIGHT - 100);
testBox.endFill();
app.stage.addChild(testBox);

// 窗口适配核心函数
function handleResize() {
  const container = document.querySelector('.pixi-container');
  const windowW = window.innerWidth;
  const windowH = window.innerHeight;

  // 计算宽高比
  const windowRatio = windowW / windowH;
  const canvasRatio = CANVAS_WIDTH / CANVAS_HEIGHT;

  let scale = 1;

  if (windowRatio > canvasRatio) {
    // 横屏状态：按窗口高度铺满，保证画布占满屏幕
    scale = windowH / CANVAS_HEIGHT;
  } else {
    // 竖屏状态：按窗口宽度缩放，但不小于原始尺寸（禁止缩小）
    scale = Math.max(windowW / CANVAS_WIDTH, 1);
  }

  // 更新渲染器尺寸
  app.renderer.resize(CANVAS_WIDTH * scale, CANVAS_HEIGHT * scale);
  // 更新容器尺寸，保持居中布局
  container.style.width = `${CANVAS_WIDTH * scale}px`;
  container.style.height = `${CANVAS_HEIGHT * scale}px`;
}

// 初始加载时执行一次
handleResize();

// 监听窗口resize，加防抖优化性能
let resizeTimer;
window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(handleResize, 50);
});

• 缩放限制：竖屏时用Math.max确保缩放比例不会小于1，完美解决画布被缩小的问题
• 横屏适配：当窗口宽高比大于画布宽高比时，直接按高度缩放，让画布铺满整个屏幕，符合你对平板/手机横屏的要求
• 居中稳定性：通过容器的flex布局+canvas的transform: translate(-50%, -50%)，无论怎么缩放都能保持精准居中
• 性能优化：防抖函数避免resize事件频繁触发导致的性能损耗

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