HTML中的画布无法配合Javascript使用的监视器屏幕，因为我仍然看到X和Y的滚动条

问题描述

我正在尝试使用HMTL创建程序，仅用于创建画布并使用Javascript在画布中绘制。我需要程序在计算机和平板电脑上运行，因此我希望画布调整到显示器的侧面。我以为只是将画布的宽度和高度设置为screen.width和screen.height，但是在Chrome浏览器中，画布大于屏幕，并且我有滚动条可以看到带有画布的窗口的其余部分。我在做什么错了？

<body>
        <div id="main_div">
        <canvas id="myCanvas" style="border:1px solid #000000;">
        <script>
    var canvas = document.getElementsByTagName('canvas')[0];
    canvas.width  = screen.width;
    canvas.height = screen.height;
    </script>
    </canvas>
    </div>
      </body>

解决方法

尝试：

html,body{
  width:100%;
  height:100%;
  margin:0;
}

#main_div{
  display:flex;
  height:100%;
}

canvas{
  flex:1
}

：）

除非用户处于全屏模式，否则即使屏幕上只有一个窗口（因为浏览器的搜索栏还有剩余空间，依此类推），屏幕尺寸还是大于窗口尺寸。您可能想找到窗口的尺寸而不是物理屏幕，以便替换

canvas.width  = screen.width;
canvas.height = screen.height;

使用

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

这将处理不同大小的窗口，尽管要响应，您可以考虑使用100vw和100vh-但在这种情况下，请注意，在某些移动系统上，vw和vh是固定的（如果用户滚动，请不要更改因此某些浏览器栏会消失），这样您就可以失去窗口的底部，直到用户向上滚动为止。

fullscreen html html5-canvas javascript resolution

HTML中的画布无法配合Javascript使用的监视器屏幕，因为我仍然看到X和Y的滚动条

问题描述

解决方法

相关问答