0

私は HTML の初心者で、Tululoo ( http://www.tululoo.com/ ) で HTML5 ゲームを作成しました。この「例」 ( http://trailsite555.eu.pn/game/ ) は正常に動作しますが、キャンバスをブラウザ ウィンドウいっぱいにする方法はありますか? （Chrome / Firefoxなど）、モバイル画面も埋める方法はありますか？

4

2 に答える 2

0

キャンバスタグはパーセントではなく、ピクセルのみです。

したがって、ビューポートの実際の寸法を計算して、それをキャンバスに適用する必要があります。CSSでスクロールバーを非表示にする必要があります。

コードは次のとおりです。

//return an obect with the dimension of the viewport of the browser
function getViewportDimension() {
var e = window, a = 'inner';
if (!( 'innerWidth' in window )) {
    a = 'client';
    e = document.documentElement || document.body;
}
return {w:e[a + 'Width'], h:e[a + 'Height']};
}

//apply the dimension to the canvas
var dim = getViewportDimension();
canvas.width = dim.w;
canvas.height = dim.h;

スクロールバーを非表示にするCSSコード：

html {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

キャンバスのサイズを変更すると、コンテンツがクリアされることを覚えておいてください。

于 2013-03-17T09:22:20.753 に答える
-1

そのコード行

<canvas id="[object Object]" width="640" height="360" style="background-color: rgb(46, 90, 65); border: 0px;"></canvas>

なぜあなたはそれを作ったwidth="640"のheight="360"ですか？

両方を 100% に変更すると、修正されるはずです。

于 2013-03-16T16:02:40.567 に答える