为缩放后的Canvas添加自动边距以避免内容偏移

你的问题核心在于**transform: scale默认以元素中心为原点缩放**，且分别按宽高比例缩放会导致画面拉伸，同时未处理缩放后的定位逻辑，所以顶部内容会跑出屏幕。以下是针对性修正方案：

关键调整方向 #

• 取宽高缩放比例中的较小值，保证Canvas完整显示且不拉伸变形
• 将缩放原点设为左上角（transform-origin: top left），避免中心缩放导致的内容偏移
• 通过计算边距让Canvas在视口中完整居中显示

修正后的代码 #

function adjustCanvasScale() {
    const canvas = document.getElementById("canvas");
    // 游戏原始锁定分辨率
    const originalWidth = 1048;
    const originalHeight = 772;
    // 当前视口可用尺寸
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;

    // 计算宽高方向的缩放比例，取最小值保证画面完整不拉伸
    const scaleX = viewportWidth / originalWidth;
    const scaleY = viewportHeight / originalHeight;
    const finalScale = Math.min(scaleX, scaleY);

    // 设置缩放原点为左上角，避免默认中心缩放的偏移问题
    canvas.style.transformOrigin = "top left";
    // 应用等比例缩放
    canvas.style.transform = `scale(${finalScale})`;

    // 计算边距，让缩放后的Canvas在视口中居中
    const scaledCanvasWidth = originalWidth * finalScale;
    const scaledCanvasHeight = originalHeight * finalScale;
    canvas.style.marginTop = `${(viewportHeight - scaledCanvasHeight) / 2}px`;
    canvas.style.marginLeft = `${(viewportWidth - scaledCanvasWidth) / 2}px`;
}

// 初始化执行缩放适配
adjustCanvasScale();
// 窗口大小变化时重新计算适配逻辑
window.addEventListener("resize", adjustCanvasScale);

代码说明 #

1. 等比例缩放：通过Math.min(scaleX, scaleY)确保Canvas能完整适配视口，不会出现横向或纵向的拉伸变形
2. 缩放原点修正：transform-origin: top left让缩放从Canvas左上角开始，彻底解决默认中心缩放导致的内容偏移问题
3. 居中定位：通过计算视口与缩放后Canvas的尺寸差，设置margin让Canvas在屏幕中垂直、水平居中，确保所有内容都在视口内
4. 响应式适配：添加resize事件监听，窗口大小改变时自动重新计算缩放比例，保证适配效果一直有效

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