Я пытаюсь создать элемент canvas, который занимает 100% ширины и высоты области просмотра.
Вы можете видеть в моем примере, который здесь происходит, однако он добавляет полосы прокрутки как в Chrome, так и в FireFox. Как я могу запретить лишние полосы прокрутки и просто точно указать ширину и высоту окна в соответствии с размером холста?
Ответы:
Чтобы холст всегда был на всю ширину и высоту экрана, т. Е. Даже при изменении размера браузера, вам нужно запустить цикл рисования внутри функции, которая изменяет размер холста до window.innerHeight и window.innerWidth.
Пример: http://jsfiddle.net/jaredwilli/qFuDr/
HTML
JavaScript
CSS
Именно так вы правильно сделаете холст на всю ширину и высоту браузера. Вам просто нужно поместить весь код для рисования на холст в функцию drawStuff ().
источник
debounce
изменить размер, иначе вы запустите браузер.display: block
: Это не только удаляет полосы прокрутки, но и удаляет 2 пикселя от высоты тела документа, которые обычно добавляются под текстовыми строками внутри блока. Так что +1 за этоВы можете попробовать единицы просмотра (CSS3):
источник
display: block;
и это сделает работу.Я отвечу на более общий вопрос о том, как сделать так, чтобы холст динамически изменялся в размерах при изменении размера окна. Принятый ответ соответствующим образом обрабатывает случай, когда ширина и высота должны быть равны 100%, что и требовалось, но также изменит соотношение сторон холста. Многие пользователи захотят изменить размер холста при изменении размера окна, но при этом не изменяя пропорции. Это не точный вопрос, но он «вписывается», просто помещая вопрос в чуть более общий контекст.
Окно будет иметь некоторое соотношение сторон (ширина / высота), как и объект Canvas. То, как вы хотите, чтобы эти два аспектных соотношения соотносились друг с другом, - это одна вещь, о которой вы должны уяснить: на этот вопрос не существует ответа «один размер подходит всем» - я рассмотрю несколько общих случаев того, что вы можете хотеть.
Самая важная вещь, которую вы должны прояснить: html-объект canvas имеет атрибут width и height; и затем CSS того же объекта также имеет атрибуты width и height. Эти две ширины и высоты разные, оба полезны для разных вещей.
Изменение атрибутов width и height - это один из методов, с помощью которого вы всегда можете изменить размер холста, но тогда вам придется перекрасить все, что займет время и не всегда необходимо, потому что вы можете выполнить некоторое изменение размера. через атрибуты css, в этом случае вы не перерисовываете холст.
Я вижу 4 случая, когда вы можете захотеть изменить размер окна (все начинается с полноэкранного холста)
1: вы хотите, чтобы ширина оставалась 100%, и вы хотите, чтобы соотношение сторон оставалось прежним. В этом случае вам не нужно перерисовывать холст; вам даже не нужен обработчик изменения размера окна. Все, что тебе нужно
где ctx - ваш контекст холста. скрипка: resizeByWidth
2: вы хотите, чтобы ширина и высота оставались равными 100%, и вы хотите, чтобы результирующее изменение соотношения сторон имело эффект растянутого изображения. Теперь вам не нужно перерисовывать холст, но вам нужен обработчик изменения размера окна. В обработчике вы делаете
скрипка: messWithAspectratio
3: ширина и высота должны оставаться на 100%, но ответ на изменение соотношения сторон отличается от растяжения изображения. Затем вам нужно перерисовать, и сделать это так, как указано в принятом ответе.
скрипка: перерисовать
4: вы хотите, чтобы ширина и высота были 100% при загрузке страницы, но после этого оставайтесь постоянными (никакой реакции на изменение размера окна нет.
скрипка: исправлено
Все скрипты имеют одинаковый код, за исключением строки 63, в которой установлен режим. Вы также можете скопировать код скрипты для запуска на локальном компьютере, и в этом случае вы можете выбрать режим с помощью аргумента строки запроса, например? Mode = redraw
источник
$(ctx.canvas).css("width", "100%");
эквивалентно$(canvas).css("width", "100%");
(холст контекста просто холст)ctx.canvas
он намного корочеcanvas.getContext('2d')
, поэтому я делаю 2). Следовательно, нет переменной с именем canvas, но есть ctx.canvas. Вот откуда взялся ctx.canvas.http://jsfiddle.net/mqFdk/10/
с CSS
источник
Я тоже искал ответ на этот вопрос, но принятый ответ сломался для меня. Очевидно, использование window.innerWidth не является переносимым. Это работает в некоторых браузерах, но я заметил, что Firefox это не понравилось.
Грегг Таварес (Gregg Tavares) разместил здесь замечательный ресурс, который напрямую решает эту проблему: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (см. Anti-pattern # 's 3 и 4).
Использование canvas.clientWidth вместо window.innerWidth, кажется, работает хорошо.
Вот предложенный Греггом цикл рендеринга:
источник
(Расширяя ответ 動靜 能量)
Стиль холста, чтобы заполнить тело. При рендеринге на холст учитывайте его размер.
http://jsfiddle.net/mqFdk/356/
CSS:
Javascript:
источник
Для мобильных телефонов лучше использовать
потому что он будет отображаться неправильно после изменения ориентации. «Область просмотра» будет увеличена при изменении ориентации на портрет. Смотрите полный пример
источник