时间戳

首页 > 解决方案 > 使用 window.innerWidth 和 window.innerHeight 使滚动条出现

javascript - 使用 window.innerWidth 和 window.innerHeight 使滚动条出现

问题描述

我正在尝试制作一个简单的画布，它可以自行拉伸以完全填充视口，但我不希望出现滚动条，如果我尝试在 JS 中使用window.innerWidthand调整画布大小，就会发生这种情况window.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()

标签： javascripthtmlcanvasviewport

解决方案

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

CSS：

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

js：

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

推荐阅读