HTML5 холст 100% ширина высота видового экрана?

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

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

6 119
jquery html5 canvas viewport

6 ответов:

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

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

HTML

<canvas id="canvas"></canvas>

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 */

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

223

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

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

Я отвечу на более общий вопрос о том, как динамически адаптировать холст по размеру при изменении размера окна. Принятый ответ соответствующим образом обрабатывает случай, когда ширина и высота должны быть 100%, что и было запрошено, но также изменит соотношение сторон холста. Многие пользователи захотят изменить размер холста при изменении размера окна, но при этом сохранить соотношение сторон нетронутым. Это не точный вопрос, но он "вписывается", просто помещая вопрос в a чуть более общий контекст.

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

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

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

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

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

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

где ctx-это ваш контекст холста. скрипка: resizeByWidth

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

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

скрипка: messWithAspectratio

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

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

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

скрипка: основные

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

13

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

Gregg Tavares опубликовал здесь отличный ресурс, который напрямую решает эту проблему: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (См. анти-паттерн # ' s 3 и 4).

используя холст.значения свойств clientwidth вместо окно.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();
8

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

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

С CSS

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

(расширяющейся после ответа 動靜能量 х)

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

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

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

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