Question

我正在使用全屏API。我学习了如何使Canvas元素全屏显示。但是，2d上下文仍然带有边框（顶部是浏览器选项卡，底部是Windows任务栏，底部是浏览器未最大化的情况。）

例如，我为移动到画布顶部的圆设置了动画。如果画布是全屏的，则它认为画布的顶部位于显示器顶部下方约十分之一的位置。

我该如何解决？

CSS：

canvas {
    top: 0px;
    left: 0px;
    position: absolute;
    background: #000000;
}

JS：

function doStartup(event) {
    document.fullscreenElement = document.fullscreenElement || 
    document.mozFullscreenElement
          || document.msFullscreenElement || 
    document.webkitFullscreenDocument;
    document.exitFullscreen = document.exitFullscreen || 
    document.mozExitFullscreen
          || document.msExitFullscreen || document.webkitExitFullscreen;

    update();
}

function toggleFullscreen() {
    let elem = document.querySelector("canvas");
    elem.requestFullscreen = elem.requestFullscreen || 
    elem.mozRequestFullscreen
        || elem.msRequestFullscreen || elem.webkitRequestFullscreen;

    if (!document.fullscreenElement) {
        elem.requestFullscreen().then({}).catch(err => {
            alert(`Error attempting to enable full-screen mode: 
        ${err.message} (${err.name})`);
        });
    } 
    else {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
    }
}

我还具有找出鼠标位置并将其绘制在屏幕上的功能。在非全屏和全屏模式下，鼠标位置都可以正常工作。但是，当我进入全屏模式时，该位置在画布上的绘制位置比预期的位置要低。

画布上下文不会进入全屏

0 个答案: