HTML5 Canvas 适合窗口答案

【问题标题】：HTML5 Canvas fit to windowHTML5 Canvas 适合窗口
【发布时间】：2013-03-09 15:59:24
【问题描述】：

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

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

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

【问题讨论】：

为什么不用 CSS 禁用滚动条？ html，正文 {overflow:hidden;}
感谢应该想到这一点，现在必须这样做:)
在此处查看示例bravenewmethod.wordpress.com/2011/08/28/…

标签： html canvas size

【解决方案1】：

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

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

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

Full Screen Demo

【讨论】：

爱它。非常感谢
canvas { width: 100%; height: 100%; } 这也可以，最好不要使用绝对定位。（例如，如果您使用绝对定位并且画布大于页面，则您无法向上或向下移动）。

【解决方案2】：

画布默认设置为display: inline-block。改成display: block

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

【讨论】：

这对我不起作用。（Chrome 版本 57.0.2987.133（64 位））

【解决方案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);

【讨论】：

【解决方案4】：

我遇到了同样的问题，我通过删除 border 解决了它。

【讨论】：