Javascript 全屏可点击区域（互联网浏览器）_Javascript_Html_Canvas

Javascript 全屏可点击区域（互联网浏览器）

javascript html canvas

Javascript 全屏可点击区域（互联网浏览器）,javascript,html,canvas,Javascript,Html,Canvas,我制作了一个通过标签显示的游戏。当你点击一个按钮时，它可以在互联网浏览器上全屏显示，但是当我进入全屏时，可点击区域仅与画布的初始大小匹配，这意味着你只能通过左上角屏幕上的一个小正方形与游戏交互我想，不知怎的，如果我按F11，然后按F10，它会工作得很好。但如果我没有先将浏览器设置为全屏模式而按F10，画布的“全屏”实际上是一个小正方形，出现在屏幕的左上角，黑色背景上，甚至没有调整大小不幸的是，我称之为“游戏”的对象是一个完全不熟悉互联网的观众。因此，要求人们按“F11”，然后按“F10”来

我制作了一个通过标签显示的游戏。当你点击一个按钮时，它可以在互联网浏览器上全屏显示，但是

当我进入全屏时，可点击区域仅与画布的初始大小匹配，这意味着你只能通过左上角屏幕上的一个小正方形与游戏交互

我想，不知怎的，如果我按F11，然后按F10，它会工作得很好。但如果我没有先将浏览器设置为全屏模式而按F10，画布的“全屏”实际上是一个小正方形，出现在屏幕的左上角，黑色背景上，甚至没有调整大小

不幸的是，我称之为“游戏”的对象是一个完全不熟悉互联网的观众。因此，要求人们按“F11”，然后按“F10”来设置。。。嗯，真烦人

所以，我的问题是：有没有办法“模仿”那个“f11，f10组合”

我的实际代码是：

<script>
function goFullScreen(){
var elem = document.getElementById("canvas");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}
}
        </script>

        <p><button onclick="goFullScreen();">Go fullscreen</button></p>


函数goFullScreen（）{
var elem=document.getElementById（“画布”）；
if（元素请求全屏）{
元素请求全屏（）；
}else if（元素mozRequestFullScreen）{
elem.mozRequestFullScreen（）；
}else if（元素webkitRequestFullscreen）{
elem.webkitRequestFullscreen（）；
}
}
全屏

出于某种原因，上面的这个不等于“F11，然后F10…”怎么了

谢谢你的阅读

编辑（其他信息）：

我在edge和mozilla firefox上试过（行为几乎相同）
我没有使用devtools
我的画布的大小基本设置如下：
以上内容未链接到任何相关或棘手的.css内容
对于html部分，我粘贴的代码几乎就是页面的全部内容
最后，关于点击事件，我不知道该说什么，这是非常基本的：一个按钮，一个链接到上面粘贴的函数的onclick事件。就游戏本身而言，它不应该干扰，因为如果我将浏览器设置为全屏（使用“F11”键），然后将页面内容设置为全屏（使用“F10”键），它不会干扰。任何其他方法都不能正常工作

// add a listener to the window resize event
addEventListener("resize",function(){
     canvas.width = innerWidth;  // This sets the resolution of the canvas
     canvas.height = innerHeight; // to match the page size.
     // As i don't see your CSS to be safe set it to pixels and match the canvas resolution
     canvas.style.width = innerWidth + "px"; // must be in pixel units
     canvas.style.height = innerHeight + "px"; // must be in pixel units

     // to play safe set to absolute positioning
     canvas.style.position = "absolute";
     canvas.style.top = "0px";
     canvas.style.left = "0px";



     // You also need to change the element that is getting the mouse
     // input (if not the canvas)
     // Calling it mouseElement 
     mouseElement.style.width = "100%";
     mouseElement.style.height = "100%";
     mouseElement.style.position = "absolute";
     mouseElement.style.top = "0px";
     mouseElement.style.left = "0px";

 }

// This function must be called from some type of user input (ie a mouse click event)
function toggleFullScreen() {
  const doc = document;
  if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement ) {  
    const docEl = document.documentElement;
    if (docEl.requestFullscreen) { docEl.requestFullscreen() }
    else if (docEl.msRequestFullscreen) { docEl.msRequestFullscreen() }
    else if (docEl.mozRequestFullScreen) { docEl.mozRequestFullScreen() }
    else if (docEl.webkitRequestFullscreen) { docEl.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT) }
  } else {
    if (doc.exitFullscreen) { doc.exitFullscreen() }
    else if (doc.msExitFullscreen) { doc.msExitFullscreen() }
    else if (doc.mozCancelFullScreen) { doc.mozCancelFullScreen() }
    else if (doc.webkitExitFullscreen) { doc.webkitExitFullscreen() }
  }
}