Холст HTML5 100% Ширина Высота видового экрана?

Я пытаюсь создать элемент canvasа, который занимает 100% от ширины и высоты windows просмотра.

Вы можете увидеть в моем примере здесь, что происходит, однако он добавляет полосы прокрутки в Chrome и FireFox. Как я могу предотвратить лишние полосы прокрутки и точно указать ширину и высоту windows как размер canvasа?

Чтобы сделать ширину и высоту всего экрана canvasа всегда, что означает, что даже когда размер браузера изменяется, вам нужно запустить цикл рисования в пределах функции, которая изменяет размер canvasа на window.innerHeight и window.innerWidth.

Пример: http://jsfiddle.net/jaredwilli/qFuDr/

HTML

 

JavaScript

 (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 } })(); 

CSS

 * { margin:0; padding:0; } /* to remove the top and left whitespace */ html, body { width:100%; height:100%; } /* just to be sure these are full screen*/ canvas { display:block; } /* To remove the scrollbars */ 

Именно так вы правильно создаете полотно ширины и высоты браузера. Вам просто нужно поместить весь код для рисования на canvas в функции drawStuff ().

Вы можете попробовать единицы просмотра (CSS3):

 canvas { height: 100vh; width: 100vw; display: block; } 

Я отвечу на более общий вопрос о том, как иметь canvas, динамически адаптируемый по размеру при изменении размера windows. Принятый ответ надлежащим образом обрабатывает случай, когда ширина и высота должны быть равны 100%, что и требовалось, но которые также изменят соотношение сторон canvasа. Многие пользователи захотят resize canvasа при изменении размера windows, но сохраняя соотношение сторон нетронутым. Это не точный вопрос, но он «подходит», просто ставя вопрос в несколько более общий контекст.

Окно будет иметь некоторое соотношение сторон (ширина / высота), а также объект canvasа. Как вы хотите, чтобы эти два соотношения сторон были связаны друг с другом, вам нужно будет четко прояснить, нет ответа «один размер подходит всем» на этот вопрос – я рассмотрю некоторые распространенные случаи того, что вы можете хотеть.

Самое важное, о чем вам нужно знать: объект html canvas имеет атрибут width и атрибут height; а затем, css одного и того же объекта также имеет ширину и атрибут высоты. Эти две ширины и высоты различны, и они полезны для разных вещей.

Изменение атрибутов ширины и высоты – это один из методов, с помощью которого вы всегда можете resize своего canvasа, но тогда вам придется перекрасить все, что потребует времени и не всегда необходимо, потому что некоторые изменения размера вы можете выполнить через атрибуты css, и в этом случае вы не перерисовываете canvas.

Я вижу 4 случая того, что вы можете захотеть при изменении размера windows (все начиная с полноэкранного canvasа)

1: вы хотите, чтобы ширина оставалась на 100%, и вы хотите, чтобы соотношение сторон оставалось таким, каким оно было. В этом случае вам не нужно перерисовывать canvas; вам даже не нужен обработчик изменения размера windows. Все что тебе нужно это

 $(ctx.canvas).css("width", "100%"); 

где ctx – ваш контекст canvas. скрипка: resizeByWidth

2: вы хотите, чтобы ширина и высота оставались на 100%, и вы хотите, чтобы результирующее изменение соотношения сторон имело эффект растянутого изображения. Теперь вам все равно не нужно перерисовывать canvas, но вам нужен обработчик изменения размера windows. В обработчике вы делаете

 $(ctx.canvas).css("height", window.innerHeight); 

скрипка: messWithAspectratio

3: вы хотите, чтобы ширина и высота оставались на 100%, но ответ на изменение соотношения сторон отличается от растягивания изображения. Затем вам нужно перерисовать и сделать это так, как это указано в принятом ответе.

скрипка: перерисовать

4: вы хотите, чтобы ширина и высота составляли 100% при загрузке страницы, но оставались неизменными после этого (нет реакции на изменение размера windows.

скрипка: исправлена

Все скрипты имеют идентичный код, за исключением строки 63, где установлен режим. Вы также можете скопировать код скрипта для запуска на вашем локальном компьютере, и в этом случае вы можете выбрать режим с помощью аргумента querystring, так как? Mode = redraw

Я тоже искал ответа на этот вопрос, но принятый ответ ломался обо мне. Очевидно, использование window.innerWidth не переносится. Он работает в некоторых браузерах, но я заметил, что Firefox не нравится.

Грег Таварес опубликовал здесь большой ресурс, который напрямую затрагивает эту проблему: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (см. 3 и 4 анти-шаблона № 3).

Использование canvas.clientWidth вместо window.innerWidth, похоже, работает хорошо.

Вот предложенный Греггом цикл рендеринга:

 function resize() { var width = gl.canvas.clientWidth; var height = gl.canvas.clientHeight; if (gl.canvas.width != width || gl.canvas.height != height) { gl.canvas.width = width; gl.canvas.height = height; return true; } return false; } var needToRender = true; // draw at least once function checkRender() { if (resize() || needToRender) { needToRender = false; drawStuff(); } requestAnimationFrame(checkRender); } checkRender(); 

http://jsfiddle.net/mqFdk/10/

    aj      

с CSS

 body { margin: 0; padding: 0 } #c { position: absolute; width: 100%; height: 100%; overflow: hidden } 

(Развернувшись на ответ 動靜 answer)

Стиль canvasа, чтобы заполнить тело. При рендеринге на canvas учитывается его размер.

http://jsfiddle.net/mqFdk/356/

    aj      

CSS:

 body { margin: 0; padding: 0 } #c { position: absolute; width: 100%; height: 100%; overflow: hidden } 

Javascript:

 function redraw() { var cc = c.getContext("2d"); c.width = c.clientWidth; c.height = c.clientHeight; cc.scale(c.width, c.height); // Draw a circle filling the canvas. cc.beginPath(); cc.arc(0.5, 0.5, .5, 0, 2*Math.PI); cc.fill(); } // update on any window size change. window.addEventListener("resize", redraw); // first draw redraw(); 
Давайте будем гением компьютера.