Question

我正在尝试制作一个可以自我拉伸以完全填充视口的简单画布，但是我不希望出现滚动条，如果我尝试使用window.innerWidth和window在JS中调整画布的大小会发生这种情况。 innerHeight。

注意：我不想在CSS中调整画布的大小，因为里面的所有元素都被拉长了，因为据我所知，CSS将画布视为img，实际上并没有扩展画布的分辨率。画布。

这是代码： css：

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

/*canvas*/
#bg {
    background: #171629;
}

js：

ctx.beginPath()
ctx.canvas.width  =  window.innerWidth
ctx.canvas.height = window.innerHeight


ctx.rect(20, 40, 50, 50)
ctx.fillStyle = "#e5e5e5"
ctx.fill()
ctx.closePath()

Answer 1

经过一番尝试，我发现这是一种解决方案：

css：

html,
body {
  display:flex;
  margin:0;
  padding:0;
}

js：

canvasElement.height = window.innerHeight;
canvasElement.width = document.body.clientWidth;

Answer 2

您还可以使用：

css：

body {
   margin: 0;
   overflow: hidden;
}

Answer 3

事实上，我的问题出在我打字的时候

<style type="text/csss">
  body{
      margin:0;
      overflow:hidden;
  }
  canvas{
      background-color:lightblue;
  }</style>

代替：

<style type="text/css">
  body{
      margin:0;
      overflow:hidden;
  }
  canvas{
      background-color:lightblue;
  } </style>

一个小小的语法错误会让你吃尽苦头

使用window.innerWidth和window.innerHeight使滚动条显示

3 个答案: