HTML 中的 Canvas 以适应监视器屏幕 Javascript 无法正常工作，因为我仍然看到 X 和 Y 的滚动条

Question

我正在尝试使用 HMTL 创建一个程序，只是为了创建一个 canvas 并在 canvas 中绘制 Javascript。我需要程序在计算机和平板电脑中运行，所以我希望 canvas 调整到显示器的一侧。我认为它只是将 canvas 的宽度和高度设置为 screen.width 和 screen.height，但在 Chrome 中 canvas 比屏幕大，我有滚动条以查看 window 和 canvas 的其余部分。我做错了什么？

<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>

Answer 1

试试 :

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

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

canvas{
  flex:1
}

:)

Answer 2

除非用户处于全屏模式，即使屏幕上只有一个 window，屏幕尺寸也会大于 window 尺寸（因为还剩下 space用于浏览器的搜索栏等）。您可能想要找到 window 而不是物理屏幕的尺寸，以便您可以替换

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

和

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

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

HTML 中的 Canvas 以适应监视器屏幕 Javascript 无法正常工作，因为我仍然看到 X 和 Y 的滚动条

Canvas in HTML to fit monitor screen with Javascript not working as I still see scrollbars for X and Y

javascript

html

html5-canvas

fullscreen

resolution