Контекст холста не входит в полноэкранный режим - PullRequest
0 голосов
/ 08 ноября 2018

Я возился с полноэкранными API.Я узнал, как сделать элемент Canvas полноэкранным.Тем не менее, 2-й контекст все еще ограничен (сверху, где будут вкладки браузера, снизу, где будет моя панель задач 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();
        }
    }
}

У меня также есть функции для определения положения мышии нарисуйте это на экране.Положение мыши отлично работает как в не полноэкранном, так и в полноэкранном режимах.Однако, когда я вхожу в полноэкранный режим, позиция на холсте рисуется ниже, чем предполагалось.

...