Ответ 1

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

Пример: 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().

Ответ 2

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

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

Ответ 3

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

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

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

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

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

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

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

где ctx - ваш контекст canvas. fiddle: resizeByWidth

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

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

скрипт: messWithAspectratio

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

скрипт: redraw

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

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

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

Ответ 4

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

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

Использование 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();

Ответ 5

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