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、canvas タグで指定する必要があります。

CSS

canvas {
    display: block;
}

デモ

于 2012-12-13T23:24:27.117 に答える
2

CSS を使用して<canvas>要素のスタイルを設定すると、サイズではなくスケーリングされます。代わりに、.widthおよび.heightプロパティを要素に設定してください(つまり、 ではありません)。canvascanvas.widthcanvas.style.width

jsfiddle の例

この例では、最初のキャンバス要素は正しくスケーリングされていますが、2 番目 (CSS を使用) は適切にスケーリングされていません。これは、CSS がスケーリングするデフォルトのキャンバス要素サイズ (300x150) に関係しています。

<canvas>を全ウィンドウの幅/高さに設定するときにスクロールバーが表示されないようにするには、上記の jsfiddle で使用されているように をbody設定します。overflow:hidden;

于 2012-12-13T23:49:28.003 に答える