Canvas (HTML) — Wikiwand
- ВведениеCanvas (HTML)
- История
- Поддержка
- Возможности
- Особенности
- Примеры или паттерны оптимизации
- Критика
- Преимущества
- Использование
- Примеры
- Библиотеки
- См. также
- Примечания
- Ссылки
Уважаемый Wikiwand AI, давайте упростим задачу, просто ответив на эти ключевые вопросы:
Перечислите основные факты и статистические данные о canvas (html)?
Кратко изложите эту статью для 10-летнего ребёнка
ПОКАЗАТЬ ВСЕ ВОПРОСЫ
Canvas (англ. canvas — «холст», рус. канва́с) — элемент HTML5, предназначенный для создания растрового двухмерного изображения при помощи скриптов, обычно на языке JavaScript[1]. Начало отсчёта блока находится слева сверху. От него и строится каждый элемент блока[2].
Размер пространства координат не обязательно отражает размер фактической отображаемой площади[2]. По умолчанию его ширина равна 300 пикселям, а высота 150[2].
| HTML |
|---|
|
п • о • р |
Используется, как правило, для отрисовки графиков для статей и игрового поля в некоторых браузерных играх.
Используется в WebGL для аппаратного ускорения 3D-графики[3].
Компанией Google была выпущена JavaScript-библиотека explorercanvas Архивировано 11 февраля 2013 года.
Canvas может усложнить задачу роботам по распознаванию Капчи. При использовании canvas с сервера загружается не картинка, а набор точек (или алгоритм прорисовки), по которым браузер прорисовывает картинку (капчу)[4].
Понимание и исправление размытых холстов HTML | Александр Джин
2 минуты чтения
·
30 марта 2020 г.
HTML-элемент Canvas отлично подходит для отображения графики произвольной формы. К сожалению, Canvas контролируется четырьмя преобразованиями, которые могут плохо взаимодействовать и искажать графику. Чтобы помочь пониманию, мы исправим каждую проблему одну за другой. Просто для решения перейдите к последнему CodePen.
HTML-холст искажен и исправленДавайте посмотрим на наивную настройку Canvas:
наивный холстРисует круг радиусом 50. Но выглядит круг ужасно: он вытянут в эллипс и выглядит пиксельным.
Первая проблема — это взаимодействие между Canvas.width/Canvas.height и CSS width/CSS height. Canvas.width/Canvas.height — это количество пикселей в растровом изображении Canvas. Как и при отображении растрового изображения через , если растровое изображение Canvas имеет другое соотношение сторон, чем CSS, растровое изображение Canvas будет искажаться, чтобы соответствовать CSS.
Мы исправляем это точно так же, как исправляем проблему соотношения сторон с , используя стиль «object-fit: contains» в CSS:
Подгоняет Canvas под размеры CSS, но сохраняет соотношение сторон.
Однако Canvas по-прежнему выглядит пиксельным. Это связано с тем, что Canvas визуализирует растровое изображение одного размера, а затем масштабирует растровое изображение в соответствии с размерами CSS. Чтобы исправить это, мы изменяем размеры растрового изображения Canvas, чтобы они соответствовали размерам CSS, используя JavaScript. К сожалению, из-за «object-fit: contains» получить пространство, отведенное CSS, немного сложно. Мы используем пользовательскую функцию JavaScript «getObjectFitSize()» (из встроенного масштаба NPM) для расчета размеров CSS:
соответствует размеру холста и CSS. Таким образом, Canvas визуализируется в растровое изображение, размер которого составляет 1:1 по отношению к размеру CSS. Однако круг теперь меньше, потому что код рисования рисует круг того же размера в растровое изображение большего размера.
Мы исправим это, изменив масштаб 2D-контекста холста, чтобы исходные команды рисования масштабировались на ту же величину, на которую мы масштабировали холст, чтобы соответствовать размерам CSS. Вызов «context.scale()» в JavaScript достигает этого:
Команды отрисовки контекста нашего холста 2D были написаны для работы с каноническим размером (в этом примере 100×100). Мы оставляем эти команды для рендеринга 100×100, но мы масштабируем контекст, чтобы рисовать больше или меньше, когда мы масштабируем размеры растрового изображения Canvas, чтобы они соответствовали размерам CSS. Таким образом, мы можем плавно отображать на холсте любые размеры, определяемые CSS, без изменения нашего кода рендеринга.
Есть еще одна причина размытости: на телефонах, планшетах и других устройствах с высокой плотностью пикселей устройство может масштабировать растровое изображение вашего холста, чтобы получить правильный абсолютный размер. Это снова приведет к размытости.
Мы исправим это, учитывая «window.devicePixelRatio» в JavaScript:
(Спасибо Заку Фришу за его прекрасную статью по этой теме.)
Размытость исчезла!
javascript — HTML5 Canvas, SVG и div
Краткий ответ:
SVG будет на проще для вас, так как выбор и перемещение уже встроены. Объекты SVG являются объектами DOM, поэтому у них есть обработчики щелчков и т. д.
DIV — это хорошо, но неуклюжие и имеют ужасную производительность при загрузке в больших количествах.
Canvas обладает наилучшей производительностью, но вы должны реализовать все концепции управляемого состояния (выбор объекта и т. д.) самостоятельно или использовать библиотеку.
Длинный ответ:
HTML5 Canvas — это просто поверхность для рисования растрового изображения. Вы настроены на рисование (скажем, цветом и толщиной линии), рисуете эту вещь, а затем Canvas ничего не знает об этой вещи: он не знает, где он или что вы только что нарисовали, он просто пиксели.
Если вы хотите рисовать прямоугольники, чтобы они двигались или чтобы их можно было выбрать, вам нужно написать все это с нуля, включая код, чтобы помнить, что вы их нарисовали.
С другой стороны, SVG должен поддерживать ссылки на каждый отображаемый объект. Каждый создаваемый вами элемент SVG/VML является реальным элементом DOM. По умолчанию это позволяет вам гораздо лучше отслеживать создаваемые вами элементы и по умолчанию упрощает работу с такими вещами, как события мыши, но значительно замедляет работу, когда имеется большое количество объектов
Эти ссылки на SVG DOM означают, что часть работы по работе с вещами, которые вы рисуете, выполняется за вас. И SVG быстрее при рендеринге действительно больших объектов, но медленнее при рендеринге многих объектов.
Игра, вероятно, была бы быстрее в Canvas. Программа с огромной картой, вероятно, была бы быстрее в SVG. Если вы хотите использовать Canvas, у меня есть несколько руководств по установке и запуску подвижных объектов здесь.
Canvas лучше подходит для более быстрых вещей и сложных манипуляций с растровыми изображениями (таких как анимация), но потребует больше кода, если вы хотите больше интерактивности.
Я прогнал кучу чисел на рисовании, созданном в HTML DIV, и на рисовании, созданном на холсте. Я мог бы написать большой пост о преимуществах каждого из них, но я приведу некоторые из соответствующих результатов моих тестов, чтобы рассмотреть их для вашего конкретного приложения:
Я сделал тестовые страницы Canvas и HTML DIV, обе имели подвижные «узлы». Узлы холста — это объекты, которые я создал и отслеживал в Javascript. Узлы HTML представляли собой подвижные элементы Div.
Я добавил по 100 000 узлов в каждый из двух тестов. Они выступили совсем по-другому:
Тестовая вкладка HTML долго загружалась (время чуть меньше 5 минут, хром попросил удалить страницу в первый раз). Диспетчер задач Chrome говорит, что вкладка занимает 168 МБ. Он занимает 12-13% процессорного времени, когда я смотрю на него, и 0%, когда я не смотрю.
Вкладка Canvas загружается за одну секунду и занимает 30 МБ. Он также все время занимает 13% процессорного времени, независимо от того, смотрит ли на него кто-то или нет. (редакция 2013 г.: они в основном это исправили)
Перетаскивание на HTML-странице стало более плавным, чего и ожидал дизайн, поскольку текущая настройка заключается в перерисовке ВСЕХ каждые 30 миллисекунд в тесте Canvas. Для этого существует множество оптимизаций для Canvas. (аннулирование холста является самым простым, а также отсечение областей, выборочное перерисовывание и т. д. просто зависит от того, насколько вы хотите реализовать)
Несомненно, вы могли бы заставить Canvas работать быстрее при манипулировании объектами, чем div в этом простом тесте, и, конечно же, гораздо быстрее во время загрузки. Рисование/загрузка выполняется быстрее в Canvas, а также имеет гораздо больше возможностей для оптимизации (т. е. очень просто исключить объекты, находящиеся за пределами экрана).
Заключение:
- SVG, вероятно, лучше для приложений и приложений с небольшим количеством элементов (менее 1000? Действительно зависит)
- Canvas лучше подходит для тысяч объектов и тщательного манипулирования, но для его запуска требуется намного больше кода (или библиотеки).
