0

我在获取窗口大小时遇到​​问题，我尝试以下代码：

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

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

问题是，我有一个垂直和水平滚动条。这意味着画布的尺寸太大。如何在不出现滚动条的情况下使其成为窗口大小？

4

2 回答 2

3

看起来您只是想让画布的宽度和高度为 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;
}
​

演示

或者如果你想使用你的代码但去掉窗口上的滚动条，你需要block在画布标签上指定。

CSS

canvas {
    display: block;
}

演示

于 2012-12-13T23:24:27.117 回答
2

当您使用 CSS 为<canvas>元素设置样式时，它将被缩放而不是调整大小。请务必在元素上设置.widthand.height属性（即not ）。canvascanvas.widthcanvas.style.width

jsfiddle 示例

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

为了防止在将 设置<canvas>为完整窗口宽度/高度时出现滚动条，请将 设置body为overflow:hidden;上面 jsfiddle 中使用的。

于 2012-12-13T23:49:28.003 回答