HTML5 Canvas 适合窗口

Question

当我这样做时，我试图让我的 Canvas 适合页面:

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

它只是在水平和垂直方向上添加了滚动条。它的大小大约是滚动条的大小，在它们出现之前就被考虑在内(只是一个猜测)这是怎么回事，我将如何让它适应没有滚动条的页面。

Answer 1

将 Canvas 位置设置为absolute。还要确保在包含元素中没有设置填充或边距。

这就是我在所有全屏 Canvas 演示中使用的内容。

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
canvas {
    position:absolute;
}

Full Screen Demo