Question

我的窗口大小有问题，我试试这段代码：

的Javascript

var game;
function game() {
    this.canvas = document.getElementById('canvas');
    this.canvasWidth = window.innerWidth;
    this.canvasHeight = window.innerHeight;    
    this.initCanvas = function() {
        this.canvas.style.width = this.canvasWidth + "px";
        this.canvas.style.height = this.canvasHeight + "px";
    }
    this.run = function() {
        this.initCanvas();
    }
}
game = new game();
game.run();

我也有

CSS

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

我的身体里只有一块画布。

问题是，我有一个垂直和水平滚动条。这意味着画布的尺寸太大。如何在不显示滚动条的情况下制作窗口大小？

Answer 1

看起来你只是想让你的画布宽度和高度都达到100％。你可以用css来完成这个：

<强> HTML

<body>
    <canvas id="canvas"></canvas>
</body>

<强> CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0px;
}
canvas {
    background: #ffcccc;
    height: 100%;
    width: 100%;
    display: block;
}

<强> Demo

或者，如果您想使用代码但摆脱窗口上的滚动条，则需要在canvas标记上指定block。

<强> CSS

canvas {
    display: block;
}

<强> Demo

Answer 2

使用CSS设置<canvas>元素的样式时，它会缩放而不是缩放。请务必在.width元素上设置.height和canvas属性（即canvas.width而不是canvas.style.width）。

jsfiddle example

在示例中，第一个canvas元素正确缩放，第二个（使用CSS）未正确缩放。这与CSS缩放的默认画布元素大小（300x150）有关。

为防止在将<canvas>设置为完整窗口宽度/高度时获取滚动条，请将body设置为overflow:hidden;，如上面的jsfiddle所示。

如何使用canvas元素填充浏览器窗口而不创建滚动条？

2 个答案: