Javascript 当我的画布处于全屏状态时，为什么会有边距？

我正在研究让对象全屏显示，当我在画布上调用requestFullscreen时，我不明白为什么画布周围有黑色的边距。为什么有边距？我应该如何修复代码，以便在调用requestFullscreen时画布真正覆盖整个屏幕

var c=document.getElementById（“myCanvas”）；
c、 宽度=window.innerWidth；
c、 高度=窗内高度；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“#00FF00”；
ctx.fillRect（0，0，c.宽度，c.高度）；
var elem=document.getElementById（“myCanvas”）；
函数openFullscreen（）{
if（元素请求全屏）{
元素请求全屏（）；
}else if（elem.mozRequestFullScreen）{/*Firefox*/
elem.mozRequestFullScreen（）；
}else if（elem.webkitRequestFullscreen）{/*Chrome、Safari和Opera*/
elem.webkitRequestFullscreen（）；
}else if（elem.msRequestFullscreen）{/*IE/Edge*/
elem.msRequestFullscreen（）；
}
}
函数关闭全屏（）{
if（document.exitFullscreen）{
document.exitFullscreen（）；
}else if（document.mozCancelFullScreen）{
document.mozCancelFullScreen（）；
}else if（document.webkitExitFullscreen）{
document.webkitExitFullscreen（）；
}else if（document.msexit全屏）{
document.msExitFullscreen（）；
}
}

*{
保证金：0；
填充：0；
}
/*删除顶部和左侧空白的步骤*/
html，
身体{
宽度：100%；
身高：100%；
}
/*只是为了确保这些都是全屏的*/

全屏打开
全屏关闭

正如Kaido所说，您正在设置页面加载时画布的大小，因此需要在全屏上重新计算一次。可以将图形逻辑包装到函数中，并在每次全屏状态更改时调用该函数：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Get browser-specific method and event name
var fullscreenProps = whichFullscreen(c);

// Draw on page load
drawCanvas();
// Redraw when going into or leaving fullscreen
c.addEventListener(fullscreenProps.eventName, drawCanvas);

function drawCanvas() {
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  ctx.fillStyle = "#00FF00";
  ctx.fillRect(0, 0, c.width, c.height);
}

function openFullscreen() {
  if (fullscreenProps.method) {
    fullscreenProps.method.call(c)
      .catch(function(err) {
        console.log("Going fullscreen failed");
        console.log(err);
      });
  } else {
    console.log("Fullscreen not available");
  }
}

function whichFullscreen(el) {
  if (el.requestFullscreen) {
    return { method: el.requestFullscreen, eventName: "fullscreenchange" };
  }
  if (el.mozRequestFullScreen) {
    return { method: el.mozRequestFullScreen, eventName: "mozfullscreenchange" };
  }
  if (el.webkitRequestFullscreen) {
    return { method: el.webkitRequestFullscreen, eventName: "webkitfullscreenchange" };
  }
  if (el.msRequestFullscreen) {
    return { method: el.msRequestFullscreen, eventName: "msfullscreenchange" };
  }
  return { method: null, eventName: null };
}

---

在手机rn上，但乍一看，我会说，在进入全屏模式之前，您正在将画布的宽度和高度设置为视口的大小，也就是说，在fumlscreen模式下，地址栏等的大小将丢失一次。您可以通过侦听resize事件来调整画布的大小，但需要重新绘制画布上的所有内容。或者，选择一种比率格式并坚持它。（在不知道你将在画布上做什么的情况下，很难说什么是最好的）。嗯，我想我想做一个比率格式，这样我就可以根据画布的比例调整我的绘图大小。如何设置比率格式？更好的方法是监听调整大小事件，全屏更改可能会在页面完全调整大小之前发生。如上示例适用于window.onresize事件。谢谢你的帮助！