Я возился с полноэкранными 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();
}
}
}
У меня также есть функции для определения положения мышии нарисуйте это на экране.Положение мыши отлично работает как в не полноэкранном, так и в полноэкранном режимах.Однако, когда я вхожу в полноэкранный режим, позиция на холсте рисуется ниже, чем предполагалось.