JavaScript全屏API在游戏开发中怎么用

JavaScript全屏API允许网页元素占据用户的整个屏幕，在网页游戏开发中，这个功能可以消除浏览器边框、地址栏等干扰元素，让玩家获得更沉浸的游戏体验。合理运用全屏API，能让网页游戏的操作感和视觉表现更接近原生游戏。

全屏API基础核心方法

全屏API主要包含三个核心操作：进入全屏、退出全屏、获取当前全屏元素，这些方法都挂载在对应的DOM元素和document对象上。

进入全屏

要让指定元素进入全屏，需要调用该元素的requestFullscreen方法，不同浏览器存在前缀差异，需要做兼容处理。

// 进入全屏的兼容方法
function enterFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) { // 兼容Chrome Safari
        element.webkitRequestFullscreen();
    } else if (element.mozRequestFullScreen) { // 兼容Firefox
        element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) { // 兼容IE Edge
        element.msRequestFullscreen();
    }
}
// 游戏画布元素
const gameCanvas = document.getElementById('game-canvas');
// 触发进入全屏
enterFullscreen(gameCanvas);

退出全屏

退出全屏需要调用document.exitFullscreen方法，同样需要做浏览器前缀兼容。

// 退出全屏的兼容方法
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

获取当前全屏元素

可以通过document.fullscreenElement判断当前是否有元素处于全屏状态，该方法返回当前全屏的元素，没有则返回null。

// 判断当前是否处于全屏状态
function isFullscreen() {
    return document.fullscreenElement ||
           document.webkitFullscreenElement ||
           document.mozFullScreenElement ||
           document.msFullscreenElement ||
           null;
}

游戏开发中的全屏适配要点

全屏状态监听

游戏需要根据全屏状态的变化调整画布尺寸、UI布局，因此要监听fullscreenchange事件。

// 监听全屏状态变化
document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);

function handleFullscreenChange() {
    const isFs = isFullscreen();
    if (isFs) {
        // 进入全屏后的处理 调整画布尺寸为屏幕大小
        const screenWidth = window.screen.width;
        const screenHeight = window.screen.height;
        gameCanvas.width = screenWidth;
        gameCanvas.height = screenHeight;
        // 重新计算游戏UI位置
        resizeGameUI();
    } else {
        // 退出全屏后的处理 恢复默认画布尺寸
        gameCanvas.width = 1280;
        gameCanvas.height = 720;
        resizeGameUI();
    }
}

全屏切换的用户交互限制

浏览器规定全屏API的调用必须来自用户的主动操作，比如点击事件、触摸事件，不能在页面加载完成后自动调用，否则会被浏览器拦截。

在游戏开发中，通常会在游戏开始界面添加一个全屏按钮，用户点击后触发全屏切换。

<button id="fullscreen-btn">进入全屏游戏</button>
<canvas id="game-canvas" width="1280" height="720"></canvas>

// 绑定全屏按钮点击事件
document.getElementById('fullscreen-btn').addEventListener('click', () => {
    const gameCanvas = document.getElementById('game-canvas');
    if (!isFullscreen()) {
        enterFullscreen(gameCanvas);
    } else {
        exitFullscreen();
    }
});

全屏下的输入事件处理

进入全屏后，部分浏览器的键盘事件可能会被系统拦截，比如F11、ESC等按键，游戏如果需要监听这些按键，需要做额外的兼容处理。同时全屏状态下鼠标锁定的需求也很常见，可以结合requestPointerLock方法实现鼠标锁定，提升射击类、动作类游戏的操作体验。

// 全屏后锁定鼠标
function lockMouseInFullscreen(element) {
    if (document.fullscreenElement === element) {
        element.requestPointerLock = element.requestPointerLock ||
                                     element.mozRequestPointerLock ||
                                     element.webkitRequestPointerLock;
        if (element.requestPointerLock) {
            element.requestPointerLock();
        }
    }
}
// 在全屏状态变化中调用
function handleFullscreenChange() {
    const isFs = isFullscreen();
    if (isFs) {
        lockMouseInFullscreen(gameCanvas);
    }
}

常见问题与解决方案

• 全屏后画布模糊：进入全屏后需要根据屏幕的devicePixelRatio调整画布的实际渲染尺寸，避免拉伸模糊。
• 全屏切换后UI错位：需要在全屏状态变化时重新计算所有UI元素的位置和尺寸，适配新的画布大小。
• 移动端全屏兼容问题：移动端浏览器的全屏API支持度较低，部分场景可以使用伪全屏方案，即让页面元素占满视口，模拟全屏效果。

总结

JavaScript全屏API是网页游戏提升体验的重要功能，开发者需要掌握其核心方法、兼容处理方案，同时结合游戏场景做好状态监听、尺寸适配、输入事件处理等工作。在实际开发中，还要注意用户交互的限制，避免非用户触发的全屏调用被浏览器拦截，最终为玩家提供流畅的全屏游戏体验。

JavaScript全屏API游戏开发requestFullscreen修改时间：2026-07-24 08:39:30