Question

我正在尝试在html / javascript中使用全屏选项。

我已将画布和按钮放在div中，全屏工作，但现在我想将我的游戏置于屏幕中间，我希望我的画布高度等于显示器的显示器高度。我希望我的宽度等于我的身高。所以我的画布呈方形。

我想我需要css，但我从未使用它，所以我不知道从哪里开始。

我的HTML代码现在看起来像这样：

<div id="theGame">
<canvas id="canvas" width="500" height="500" style=" position:absolute; top:40px; left:0px; border:6px  ridge #FFAB00;"></canvas>
<button buttonSpecs... </button>
<button buttonSpecs... </button>

</div>

目前我在全屏时看起来像这样： https://www.dropbox.com/s/ee4bv0cn2tm2nns/fullscreen.jpg

但那不是我想要的，我想这样： https://www.dropbox.com/s/cu54fqz0gzap1ul/howIwant.jpg

Answer 1

请参阅以下问题：HTML5 Canvas 100% Width Height of Viewport?

(function() {
var canvas = document.getElementById('canvas'),
        context = canvas.getContext('2d');

// resize the canvas to fill browser window dynamically
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        /**
         * Your drawings need to be inside this function otherwise they will be reset when 
         * you resize the browser window and the canvas goes will be cleared.
         */
        drawStuff(); 
}
resizeCanvas();

function drawStuff() {
        // do your drawing stuff here
}
})();

Answer 2

好的，我现在可以使用

拉伸画布

CSS：

#canvas {
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  z-index: 0;
}

以javascript / html为中心全屏

2 个答案: