Центрирование полноэкранного в javascript / html

Question

Центрирование полноэкранного в javascript / html

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

Bosiwow 03 нояб. 2013, в 13:58

Источник

0

Итак, вы начинаете с canvas, прежде чем узнаете основы CSS?
Eric Herlitz 03 нояб. 2013, в 12:55
0

Я писал небольшую игру на javascript, а не сайт ... Мы учим только javascript в школе. Но я хочу использовать немного CSS / HTML в моей игре.
Bosiwow 03 нояб. 2013, в 13:08

Теги:

javascript

html

center

fullscreen

2 ответа

Ещё вопросы

Итак, вы начинаете с canvas, прежде чем узнаете основы CSS?
Я писал небольшую игру на javascript, а не сайт ... Мы учим только javascript в школе. Но я хочу использовать немного CSS / HTML в моей игре.

Bosiwow · Answer 1 · 2013-11-05T08-01-00.000Z

Хорошо, теперь я могу растянуть холст, используя

CSS:

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

user2815780, если у вас есть больше деталей, чтобы добавить к вашему вопросу, пожалуйста, отредактируйте исходный текст. Вы также можете задать совершенно новый вопрос.

Tosh · Answer 2 · 2013-11-03T10-30-00.000Z

См. Следующий вопрос: 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
}
})();