html - HTML5 Canvas 适合窗口

Question

当我这样做时，我试图让我的画布适合页面：

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

它在水平和垂直方向上都在添加滚动条。它的大小大约是滚动条的大小，甚至在它们出现之前就被考虑了（只是一个猜测）这是发生了什么，我将如何让它适合没有滚动条的页面。

Answer 1

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

这是我在所有全屏画布演示中使用的。

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

全屏演示

Answer 2

画布默认设置为display: inline-block. 将其更改为display: block

body {
    margin: 0;
    padding: 0;
}
canvas {
    display: block;
}

Answer 3

这对我有用

function resize() {

    var canvas = document.getElementById('game');
    var canvasRatio = canvas.height / canvas.width;
    var windowRatio = window.innerHeight / window.innerWidth;
    var width;
    var height;

    if (windowRatio < canvasRatio) {
        height = window.innerHeight;
        width = height / canvasRatio;
    } else {
        width = window.innerWidth;
        height = width * canvasRatio;
    }

    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
};

window.addEventListener('resize', resize, false);

Answer 4

我有同样的问题，我通过删除border.