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

<强> Full Screen Demo

Answer 2

默认情况下，画布设置为display: block。将其更改为body { margin: 0; padding: 0; } canvas { display: block; }

{{1}}

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解决了这个问题。

HTML5 Canvas适合窗口

4 个答案: