0

我正在尝试使全屏选项在 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

4

2 回答 2

0

好的，我现在可以拉伸画布，使用

CSS：

#canvas {
  width: 100%; 
  height: 100%; 
  position: absolute; 
  left: 0px; 
  top: 0px; 
  z-index: 0;
}
于 2013-11-05T09:40:08.947 回答
0

请参阅以下问题：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
}
})();
于 2013-11-03T13:07:28.410 回答