Я пытаюсь создать элемент холста, который занимает 100% от ширины и высоты окна просмотра.HTML5 Canvas 100% Ширина Высота видового экрана?
Вы можете видеть в моем примере here, что происходит, однако оно добавляет полосы прокрутки как в Chrome, так и в FireFox. Как я могу предотвратить лишние полосы прокрутки и точно указать ширину и высоту окна как размер холста?
Для того, чтобы сделать ширину холста полный и высоту экрана всегда, то есть даже тогда, когда браузер изменяет размер, вам нужно запустить цикл вытяжки в пределах функция, которая изменяет размер холста на window.innerHeight и window.innerWidth.
Пример: http://jsfiddle.net/jaredwilli/qFuDr/
<canvas id="canvas"></canvas>
(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
}
})();
* { 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 */
То есть, как вы правильно сделать холст полную ширину и Hei ght браузера. Вам просто нужно поместить весь код для рисования на холст в функции drawStuff().
<!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
}
Это работает, но он оставляет свой холст без определенной ширины и высоты.Ширина и высота холста должны быть определены на элементе, который я считаю. – aherrick 2010-11-26 22:49:41
@aherrick: Нет, вам не нужно иметь явную ширину/высоту, установленную на элементе canvas, чтобы он работал. Этот код должен работать нормально. – 2011-09-13 14:04:01
На самом деле да, элементы холста нуждаются в явной ширине/высоте. Без него они по умолчанию устанавливают предварительно установленный браузер (в хром, я думаю, это 300x150px). Весь рисунок на холсте интерпретируется с таким размером, а затем масштабируется до 100% размера видового экрана. Попробуйте нарисовать ___anything___ в своем холсте, чтобы понять, что я имею в виду - он будет искажен. – 2011-12-13 08:46:01
Вы можете попробовать viewport units (CSS3):
canvas {
height: 100vh;
width: 100vw;
display: block;
}
(Расширение на 動靜 能量 's ответ) Стиль
холст, чтобы заполнить тело. При рендеринге на холст учитывается его размер.
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();
Отвечу более общий вопрос о том, как иметь холст динамически адаптироваться в размере от изменение размера окна. Принятый ответ надлежащим образом обрабатывает случай, когда ширина и высота должны быть равны 100%, что и требовалось, но которые также изменят соотношение сторон холста. Многие пользователи захотят изменить размер холста при изменении размера окна, но сохраняя соотношение сторон нетронутым. Это не точный вопрос, но он «подходит», просто ставя вопрос в несколько более общий контекст.
Окно будет иметь соотношение сторон (ширина/высота), а также объект холста. Как вы хотите, чтобы эти два соотношения сторон были связаны друг с другом, вам нужно будет четко прояснить, нет ответа «один размер подходит всем» на этот вопрос - я рассмотрю некоторые распространенные случаи того, что вы можете хотеть.
Самое важное, о чем вам нужно знать: объект html canvas имеет атрибут width и атрибут height; а затем, css одного и того же объекта также имеет ширину и атрибут высоты. Эти две ширины и высоты различны, и они полезны для разных вещей.
Изменение атрибутов ширины и высоты - это один из способов, с помощью которого вы всегда можете изменить размер своего холста, но тогда вам придется перекрасить все, что потребует времени и не всегда необходимо, поскольку некоторый размер вы можете выполнить с помощью атрибутов css, и в этом случае вы не будете перерисовывать холст.
я вижу 4 случая того, что вы могли бы произойти на изменения размеров окна (все, начиная с полного экрана холст)
1: Вы хотите, чтобы ширина оставаться 100%, и вы хотите, соотношение сторон, чтобы остаться как это было. В этом случае вам не нужно перерисовывать холст; вам даже не нужен обработчик изменения размера окна. Все, что вам нужно, это
$(ctx.canvas).css("width", "100%");
где ctx - ваш контекст в холсте. fiddle: resizeByWidth
2: вы хотите, чтобы ширина и высота оставались на 100%, и вы хотите, чтобы результирующее изменение соотношения сторон имело эффект растянутого изображения. Теперь вам все равно не нужно перерисовывать холст, но вам нужен обработчик изменения размера окна. В обработчике вы
$(ctx.canvas).css("height", window.innerHeight);
скрипку: messWithAspectratio
3: вы хотите ширину и высоту и остаться на 100%, но ответ на изменение соотношения сторон является то, что отличается от растягивания изображения. Затем вам нужно перерисовать и сделать это так, как это указано в принятом ответе.
скрипку: redraw
4: Вы хотите, ширину и высоту, чтобы быть 100% при загрузке страницы, но остаются неизменными (никакой реакции на изменения размеров окна
скрипку:. fixed
Все Fiddles имеют идентичный код, за исключением строки 63, где установлен режим. Вы также можете скопировать код скрипта для запуска на вашем локальном компьютере, и в этом случае вы можете выбрать режим с помощью аргумента запроса, как? mode = redraw
Я тоже искал ответ на этот вопрос, но принятый ответ ломался обо мне. Очевидно, использование window.innerWidth не переносится. Он работает в некоторых браузерах, но я заметил, что Firefox не нравится.
Грегг Таварес разместил большой ресурс здесь, что адресует этот вопрос напрямую: 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();
Смотрите также: https://stackoverflow.com/questions/4037212 – hippietrail 2017-08-23 23:36:51