Сделать canvas на полный экран
Я создаю канвас, растягиваю его на весь экран, но он растягивается не совсем корректно. Слева и сверху есть небольшие отступы, пикселов по 5-10. Как мне переместить канвас в точку экрана 0,0 или узнать размер этих отступов?
1 2 3 4 5 6 7 8
html> head> script language="JavaScript" src="./main.js">/script> /head> body> canvas width='100' height='100' id='screen'>please reload/canvas> /body> /html>
1 2 3 4 5 6 7 8 9 10 11 12 13 14
var screen; var ctx; function redrawScene(){ ctx.fillRect(0, 0, screen.width, screen.height) } window.onload = function(){ screen = document.getElementById('screen'); screen.width = window.innerWidth; screen.height = window.innerHeight; ctx = screen.getContext('2d'); redrawScene(); }
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Помогите пожалуйста сделать канву на полный экран 🙂
procedure TForm1.Button6Click(Sender: TObject); var i,y,x, x2, y2: Integer; for i := 1 to 300 do.
Как сделать отсчет от десяти на полный экран?
Посоветуйте пожалуйста как сделать отсчет от десяти на полный экран.Проблема не в том как сделать.
Как сделать чтоб браузер открывался на полный экран
Добрый день . На терминале стоит виндовс 7 . Добавлен браузер в автозагрузку чтоб при включении.
Как сделать, чтобы сайт автоматически открывался на полный экран(на телефонах)
Здравствуйте, пожалуйста, подскажите, что нужно сделать чтобы сайт (sait-steklo.ru) на мобильных.
супермизантроп
3940 / 2978 / 692
Регистрация: 18.04.2012
Сообщений: 8,625
это предустановленные отступы тела документа
узнать их величину:
1 2 3 4 5
onload = function () { alert ('сверху: ' + window.getComputedStyle (document.body, null).getPropertyValue ('margin-top')); alert ('слева: ' + window.getComputedStyle (document.body, null).getPropertyValue ('margin-left')); }
лечение:
— либо
— либо
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь
Не на полный экран.
Доброго времени суток у меня такая трабла написал игру, а она не на полный экран т.е. видно время.
Запуск TP на полный экран.
Здраствуйте, У меня такая проблема: Скачал Turbo Pascal, все работает. Но при нажатии alt-enter.
Видео на полный экран
Нужно зделать так чтобы видео(использую MediaPlayer) отображалось на полный екран (Может надо какие.
Окна в полный экран
Всем привет! Подскажите как создавать окна в полный экран? Интересует окно в полный экран, и окно.
Изменение размера Canvas в WebGL
Вот, что вам следует знать об изменениях размера canvas.
Каждый canvas имеет 2 размера. Первый — размер буфера отрисовки. Он отвечает за то, сколько пикселей помещается в canvas. Второй — размер отображаемого на HTML-странице элемента canvas. Этот размер задаётся через CSS.
Размер буфера отрисовки можно задать двумя способами. Первый — через HTML:
Второй способ — через JavaScript:
var canvas = document.querySelector("#c"); canvas.width = 400; canvas.height = 300; Что касается размера отображаемого элемента, то при отсутствии стилей CSS, которые влияют на элемент, размер элемента будет равен размеру буфера отрисовки. Поэтому в 2 примерах выше размер буфера отрисовки будет равен 400×300, и размер отображаемого элемента будет также равен 400×300.
А вот пример, когда размер буфера отображения — 10×15, а размер HTML-элемента — 400×300 пикселей:
или можно задать так:
Если мы отобразим вращающуюся линию шириной один пиксель, мы получим что-то вроде:
Почему она такая размытая? Потому что браузер принимает canvas 10×15, а затем растягивает его до размера 400×300 пикселей, применяя для этого фильтрацию.
Так что же делать, если, к примеру, нам нужно, чтобы canvas заполнил всё окно? Для начала нам нужны CSS-стили, чтобы браузер растянул canvas на всё окно. Например:
/* убираем границу */ body < border: 0; background-color: white; >/* растягиваем canvas на всю область просмотра */ canvas < width: 100vw; height: 100vh; display: block; > Теперь нам нужно, чтобы размер буфера отрисовки соответствовал размеру HTML-элемента, как бы браузер его ни растянул. Мы можем использовать свойствами clientWidth и clientHeight , которые есть у любого HTML-элемента и которые позволяют JavaScript узнавать размер отображаемого элемента.
function resize(canvas) < // получаем размер HTML-элемента canvas var displayWidth = canvas.clientWidth; var displayHeight = canvas.clientHeight; // проверяем, отличается ли размер canvas if (canvas.width != displayWidth || canvas.height != displayHeight) < // подгоняем размер буфера отрисовки под размер HTML-элемента canvas.width = displayWidth; canvas.height = displayHeight; >> Большинство приложений WebGL используют анимацию, поэтому будем вызывать эту функцию непосредственно перед отрисовкой, чтобы при отрисовке размер canvas всегда соответствовал размеру HTML-элемента.
function drawScene() < resize(gl.canvas); . И вот результат:
Но что не так? Почему линия не занимает всю область?
Причина в том, что при изменении размера canvas нам также необходимо вызвать gl.viewport для установки размера области просмотра. gl.viewport сообщает WebGL, как и в какую область внутри canvas преобразовывать координаты пространства отсечения (от -1 до +1) в пиксели. При первом создании контекста WebGL область просмотра будет соответствовать размеру canvas, но после этого вам необходимо следить за её размерами. Если вы меняете размер canvas, вам также необходимо сообщить WebGL новые параметры области просмотра.
Изменим код, чтобы учитывать такую ситуацию. Более того, раз уж ссылка на canvas доступна из контекста WebGL, будем передавать его параметром функции resize.
function drawScene() < resize(gl.canvas); + gl.viewport(0, 0, gl.canvas.width, gl.canvas.height); . Теперь линия отображается как мы и ожидали.
Откройте пример в отдельном окне и меняйте размер окна. Линия всегда заполняет всё окно.
Слышу, вы спрашиваете, почему WebGL не устанавливает область просмотра для нас автоматически при изменении размера canvas? Просто потому, что он не знает, как и для чего вы используете область просмотра. Например, вы можете выполнять отрисовку во фреймбуфер или заниматься чем-то другим, что требует различного размера области просмотра. WebGL никак не может знать ваши намерения, поэтому он не подстраивает область просмотра.
В разных программах WebGL люди по-разному обрабатывают изменение размера canvas. Если вам интересно, я описал несколько причин, почему я предпочитаю описанный выше подход.
Что насчёт дисплеев Retina или HD-DPI?
При указании размера через CSS или Canvas используются пиксели, называемые также CSS-пиксели, которые могут отличаться от действительных пикселей. Большинство современных смартфонов оснащены дисплеями высокой чёткости (HD-DPI) или, как их называет Apple, "дисплеями Retina". Для текста и большей части стилей CSS браузер способен автоматически отображать графику HD-DPI, но в случае с WebGL вы сами отвечаете за графику, и вам необходимо самим позаботиться об отображении графики с более высоким разрешением, если вы хотите получить качество HD-DPI.
Для этого мы можем посмотреть на значение window.devicePixelRatio . Это значение укажет, как много действительных пикселей помещаются в одном пикселе CSS. Мы можем внести изменения в функцию изменения размера для ориентации на действительный пиксель.
function resize(gl) < var realToCSSPixels = window.devicePixelRatio; // Берём заданный браузером размер canvas в CSS-пикселях и вычисляем нужный // нам размер, чтобы буфер отрисовки совпадал с ним в действительных пикселях var displayWidth = Math.floor(gl.canvas.clientWidth * realToCSSPixels); var displayHeight = Math.floor(gl.canvas.clientHeight * realToCSSPixels); // проверяем, отличается ли размер canvas if (gl.canvas.width !== displayWidth || gl.canvas.height !== displayHeight) < // подгоняем размер буфера отрисовки под размер HTML-элемента gl.canvas.width = displayWidth; gl.canvas.height = displayHeight; >>
Если вы откроете эту страницу на дисплее HD-DPI - например, на вашем смартфоне - вы заметите, что линия на примере ниже тоньше, чем в примерах выше, в которых не учитывались дисплеи HD-DPI.
Настраивать ли программу под использование дисплеев HD-DPI, зависит только от вас. На iPhone4 и iPhone5 window.devicePixelRatio равен 2 , что означает, что вы будете отображать в 4 раза больше пикселей. Думаю, что на iPhone6Plus это значение равно 3 , то есть вы будете отображать в 9 раз больше пикселей. Это может замедлить вашу програму. Вообще, для игр типично отображать меньше пикселей, чтобы видеокарта сама растянула их. Всё зависит от ваших целей. Например, если вы готовите график для печати, то, возможно, вам понадобится поддержка HD-DPI. Для игр, возможно, не понадобится такой поддержки, или вы сделаете настройку, чтобы можно было включить поддержку HD-DPI или выключить, если устройство недостаточно мощное для отрисовки такого количества пикселей.
- Основы
- Основы WebGL
- Как работает WebGL
- Шейдеры и GLSL в WebGL
- WebGL State Diagram
- Обработка изображений в WebGL
- Продолжаем обработку изображений в WebGL
- 2D-перенос в WebGL
- 2D-поворот в WebGL
- 2D-масштабирование в WebGL
- 2D-матрицы в WebGL
- WebGL 3D - Ортогональ
- WebGL 3D - Перспектива
- WebGL 3D - Камеры
- WebGL 3D - Направленное освещение
- WebGL 3D - Точечное освещение
- WebGL 3D - Прожектор
- WebGL - Меньше кода, больше веселья
- WebGL - Отрисовка нескольких объектов
- WebGL - Графы сцены
- WebGL 3D - Создание модели
- Loading .obj files
- Loading .obj w .mtl files
- WebGL 3D - Текстуры
- WebGL - Данные для текстур
- WebGL - Использование 2 и более текстур
- WebGL - Кросс-доменные изображения
- WebGL 3D - Перспективная коррекция текстур
- Planar and Perspective Projection Mapping
- WebGL - Рендеринг в текстуру
- Shadows
- 2D
- WebGL 2D - DrawImage
- WebGL 2D - Стек матриц
- Sprites
- Cubemaps
- Environment maps
- Skyboxes
- Skinning
- Fog
- Picking (clicking on stuff)
- WebGL текст - HTML
- WebGL текст - Canvas 2D
- WebGL текст - Используем текстуру
- WebGL текст - Используем глиф-текстуру
- Ramp Textures (Toon Shading)
- GPGPU
- Smallest Programs
- Drawing Without Data
- Shadertoy
- Pulling Vertices
- Indexed Vertices (gl.drawElements)
- Instanced Drawing
- WebGL Установка и настройка
- Шаблон WebGL
- Изменение размера Canvas в WebGL
- WebGL - Анимация
- Points, Lines, and Triangles
- Multiple Views, Multiple Canvases
- Visualizing the Camera
- WebGL и прозрачность
- WebGL - 2D и 3D библиотеки
- WebGL - Антипаттерны
- WebGL Matrices vs Math Matrices
- Precision Issues
- Taking a screenshot
- Prevent the Canvas Being Cleared
- Get Keyboard Input From a Canvas
- Use WebGL as Background in HTML
- Cross Platform Issues
- Questions and Answers
- Attributes
- Texture Units
- Framebuffers
- readPixels
- References
- Документация по вспомогательным функциям
- TWGL, лёгкая библиотека-помощник для WebGL
- github
WebGL - Антипаттерны
Ниже приведён список антипаттернов в WebGL. Антипаттерны - это вещи, которых стоит избегать.
-
Добавление свойств viewportWidth и viewportHeight объекту WebGLRenderingContext Порой можно встретить, что значения ширины и высоты области просмотра записываются в свойства объекта WebGLRenderingContext , например так:
gl = canvas.getContext("webgl"); gl.viewportWidth = canvas.width; // ПЛОХО. gl.viewportHeight = canvas.height; // ПЛОХО.Затем свойства могут использоваться следующим образом:
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
Почему это плохо: Это объективно плохо, потому что теперь у вас появляется 2 свойства, которые нужно не забывать обновлять каждый раз при изменении размера canvas. Например, при изменении размера окна пользователем свойства gl.viewportWidth и gl.viewportHeight будут некорректными, их нужно обновить согласно новым размерам canvas. Это субъективно плохо, потому что новички в WebGL посмотрят на ваш код и подумают, что gl.viewportWidth и gl.viewportHeight - часть спецификации WebGL, что введёт их в заблуждение, возможно, на месяцы. Что делать вместо этого: Зачем создавать себе больше работы? Контекст WebGL уже содержит ширину и высоту. Просто используйте их.
// если вам необходимо, чтобы область просмотра соответствовала размеру // буфера отрисовки canvas'а, это всегда будет работать gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
var aspect = canvas.width / canvas.height; perspective(fieldOfView, aspect, zNear, zFar);
Почему это плохо: Ширина и высота canvas никак не связана с тем размером, как canvas отображается на странице. За размер canvas на странице отвечает CSS. Что делать вместо этого: Используйте canvas.clientWidth и canvas.clientHeight . Эти размеры вернут реальный размер отображаемого на экране canvas. Используя эти свойства, у вас всегда будет правильное соотношение сторон экрана, независимо от CSS.
var aspect = canvas.clientWidth / canvas.clientHeight; perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
Ниже идут несколько примеров canvas с одинаковым размером ( width="400" height="300" ), но через CSS мы задаём разный размер отображения в браузере. Заметьте, что примеры сохраняют корректное соотношение сторон экрана.
А если мы используем canvas.width и canvas.height , изображение искажается.
canvas.width = window.innerWidth; // ПЛОХО!! canvas.height = window.hinnerHeight; // ПЛОХО!!
Почему это плохо: Это не переносится. Да, это будет работать на HTML-страницах, где вы хотите растянуть canvas на весь экран. Проблема появится, когда полноэкранный режим станет не нужен. Возможно, вы решите сделать статью подобную моей, где canvas - лишь небольшая часть большой страницы. А может сбоку вам нужен редактор свойств или статистика по игре. Конечно, вы сможете обойти эти ситуации, но почему бы сразу не написать код так, чтобы он работал везде? Тогда вам не придётся менять его при создании нового проекта или использование старого проекта по-новому. Что делать вместо этого: Вместо того, чтобы бороться с веб-страницей, сотрудничайте с ней! Используйте CSS вместе с clientWidth и clientHeight .
var width = gl.canvas.clientWidth; var height = gl.canvas.clientHeight; gl.canvas.width = width; gl.canvas.height = height;
window.addEventListener('resize', resizeTheCanvas);window.onresize = resizeTheCanvas;
Почему это плохо: Само по себе это не плохо. Просто для большинства программ на WebGL такое решение не охватывает некоторых ситуаций. Событие 'resize' срабатывает, только когда размер окна меняется. Оно не сработает, если по каким-то причинам изменился размер canvas. Например, вы делаете 3D-редактор. Ваш canvas находится слева, настройки расположены справа. И у вас есть возможность расширять или сужать панель настроек, потянув за границу между настройками и canvas. В этом случае не будет никакого события 'resize' . Аналогично, при добавлении или удалении контента на страницу размер canvas может меняться, и вы тоже не получите события 'resize' . Что делать вместо этого: Как и во многих решениях выше, в данном случае есть способ написать код так, чтобы он работал в большинстве ситуаций. Для приложений WebGL, которые постоянно отображают каждый кадр, можно проверять размер перед отрисовкой, и в зависимости от результата обновлять размер.
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; >> function render() < resize(); drawStuff(); requestAnimationFrame(render); >render();
Теперь во всех описанных выше ситуациях canvas будет всегда иметь правильный размер. Нет необходимости менять код для отдельных случаев. Например, используя код из примера #3, сделаем редактор с возможностью менять размер панели настроек.
В этом примере не будет события изменений размера, как и в других случаях, когда размер canvas меняется динамически в зависимости от других элементов страницы. Для приложений, где не отрисовывается каждый кадр, код по-прежнему будет работать, вам нужно лишь вызывать перерисовку при изменении размера canvas. Одним из решений будет использование цикла requestAnimationFrame следующим образом:
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; // необходимо отрисовать хотя бы раз function checkRender() < if (resize() || needToRender) < needToRender = false; drawStuff(); >requestAnimationFrame(checkRender); > checkRender();
var buffer = gl.createBuffer(); buffer.itemSize = 3; // ПЛОХО!! buffer.numComponents = 75; // ПЛОХО!! var program = gl.createProgram(); . program.u_matrixLoc = gl.getUniformLocation(program, "u_matrix"); // ПЛОХО!!
Почему это плохо: Причина заключается в том, что WebGL может "потерять контекст"". Это может случиться по многим причинам, но чаще всего возникает ситуация, когда браузер решает, что используется слишком много ресурсов видеокарты, и вытесняет контекст некоторых WebGLRenderingContext , чтобы освободить память. Программам WebGL, работающим без остановки, необходимо отлавливать эту ситуацию. Например, Google Maps обрабатывает такую ситуацию. Проблема упомянутого кода в том, что при потере контекста теряются и функции создания объектов, например gl.createBuffer() вернёт null . Поэтому следующий код
var buffer = null; buffer.itemSize = 3; // ОШИБКА! buffer.numComponents = 75; // ОШИБКА!
скорей всего прекратит выполнение вашего приложение с ошибкой
TypeError: Cannot set property 'itemSize' of null
Многим приложениям не важно, если они завершатся по ошибке при потере контекста, но всё же это является плохой практикой, потому что разработчику придётся исправлять код, если ему понадобится обрабатывать ситуацию с потерей контекста. Что делать вместо этого: Если вам нужно сохранить WebGLObjects и другую информации в одном месте, одним из способов будет использование объектов JavaScript. Например:
var bufferInfo = < id: gl.createBuffer(), itemSize: 3, numComponents: 75, >; var programInfo = < id: program, u_matrixLoc: gl.getUniformLocation(program, "u_matrix"), >;
Описанные выше ситуации, которые я отношу к антипаттернам WebGL, я встретил на просторах интернета. Надеюсь, я показал, почему их нужно избегать, а приведённые решение будут вам полезны.
Что такое drawingBufferWidth и drawingBufferHeight?
В видеокарте есть ограничение на размер прямоугольника пикселей (текстуры, буфера отрисовки). Обычно этот размер является степенью двойки и при этом превышает разрешение монитора, которое распространено на момент выпуска видеокарты. Например, если видеокарта выпущена для мониторов 1280x1024, её ограничением скорей всего будет значение 2048. В случае с мониторами разрешением 2560x1600 ограничение видеокарты составит 4096.
Это кажется разумным, но что случится, если у вас несколько мониторов? Скажем, у меня видеокарта с ограничением 2048, но у меня два монитора 1920x1080. Пользователь откроет окно браузера со страницей WebGL и растянет окно на два монитора. Ваш код попытается установить canvas.width в значение canvas.clientWidth , которое в данный момент равно 3840. Что произойдёт?
У меня сходу есть 3 варианта
- Исключение Плохой сценарий. Большинство приложений не проверят это исключение и прервут выполнение. Если в приложении были данные пользователя, они потеряются.
- Ограничить размер canvas до ограничения видеокарты Это решение тоже, вероятно, приведёт к прерыванию работы программы или другим проблемам на странице, так как код ожидает, что размер canvas будет другим, и что другие части интерфейса будут на своих местах страницы.
- Размер canvas может быть любым, но буфер отрисовки будет ограничен Это решение, которое использует WebGL. Если ваш код написан верно, пользователь сможет заметить лишь то, что изображение на canvas немного растянулось. В других случаях всё будет в порядке. В худшем случае, когда ваш код написан не совсем корректно, пользователь увидит смещение картинки, но при уменьшении размера окна картинка будет отображаться нормально.
У большинства пользователей один монитор, поэтому проблема возникает редко. Или, по крайней мере, возникала редко. Chrome и Safari, во всяком случае на январь 2015 года, имели встроенное ограничение canvas 4096. У Apple iMac 5k ограничение было выше. Из-за этого многие приложения WebGL имели странности с отображением. Аналогично многие люди начали использовать WebGL с двумя мониторами для работы с инсталляциями и тоже достигли ограничения.
Поэтому если вы хотите обработать эти случаи, используйте gl.drawingBufferWidth и gl.drawingBufferHeight , как показано в примере #1. Для большинства приложений при следовании советам, описанных выше, всё будет работать без проблем. Однако, если вы выполняете вычисления, для которых нужен реальный размер буфера отрисовки, вам нужно принять во внимание описанное выше. Например, выбор объектов сцены, где нужно преобразовать координаты мыши в пиксели canvas. Другой пример - пост-эффекты, для которых нужно знать реальный размер буфера отрисовки.
- Основы
- Основы WebGL
- Как работает WebGL
- Шейдеры и GLSL в WebGL
- WebGL State Diagram
- Обработка изображений в WebGL
- Продолжаем обработку изображений в WebGL
- 2D-перенос в WebGL
- 2D-поворот в WebGL
- 2D-масштабирование в WebGL
- 2D-матрицы в WebGL
- WebGL 3D - Ортогональ
- WebGL 3D - Перспектива
- WebGL 3D - Камеры
- WebGL 3D - Направленное освещение
- WebGL 3D - Точечное освещение
- WebGL 3D - Прожектор
- WebGL - Меньше кода, больше веселья
- WebGL - Отрисовка нескольких объектов
- WebGL - Графы сцены
- WebGL 3D - Создание модели
- Loading .obj files
- Loading .obj w .mtl files
- WebGL 3D - Текстуры
- WebGL - Данные для текстур
- WebGL - Использование 2 и более текстур
- WebGL - Кросс-доменные изображения
- WebGL 3D - Перспективная коррекция текстур
- Planar and Perspective Projection Mapping
- WebGL - Рендеринг в текстуру
- Shadows
- 2D
- WebGL 2D - DrawImage
- WebGL 2D - Стек матриц
- Sprites
- Cubemaps
- Environment maps
- Skyboxes
- Skinning
- Fog
- Picking (clicking on stuff)
- WebGL текст - HTML
- WebGL текст - Canvas 2D
- WebGL текст - Используем текстуру
- WebGL текст - Используем глиф-текстуру
- Ramp Textures (Toon Shading)
- GPGPU
- Smallest Programs
- Drawing Without Data
- Shadertoy
- Pulling Vertices
- Indexed Vertices (gl.drawElements)
- Instanced Drawing
- WebGL Установка и настройка
- Шаблон WebGL
- Изменение размера Canvas в WebGL
- WebGL - Анимация
- Points, Lines, and Triangles
- Multiple Views, Multiple Canvases
- Visualizing the Camera
- WebGL и прозрачность
- WebGL - 2D и 3D библиотеки
- WebGL - Антипаттерны
- WebGL Matrices vs Math Matrices
- Precision Issues
- Taking a screenshot
- Prevent the Canvas Being Cleared
- Get Keyboard Input From a Canvas
- Use WebGL as Background in HTML
- Cross Platform Issues
- Questions and Answers
- Attributes
- Texture Units
- Framebuffers
- readPixels
- References
- Документация по вспомогательным функциям
- TWGL, лёгкая библиотека-помощник для WebGL
- github
Как сделать canvas во всю ширину и высота viewport?
Как сделать чтобы область canvas была во всю ширину и высоту viewport?
canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight;Но при уменьшении экрана появляются полосы прокрутки. Как сделать чтобы полос прокрутки не было? Чтобы канвас можно сказать адаптивным был..
- Вопрос задан более трёх лет назад
- 7243 просмотра