Элемент canvas является частью HTML5 и позволяет выполнять динамическую, скриптовую визуализацию 2D-фигур и растровых изображений . Это низкоуровневая, процедурная модель, которая обновляет растровое изображение . HTML5 Canvas также помогает в создании 2D-игр .
Хотя HTML5 Canvas предлагает собственный API для 2D-рисования , он также поддерживает API WebGL , что позволяет выполнять 3D-рендеринг с помощью OpenGL ES .
Canvas был первоначально представлен Apple для использования в их собственном компоненте Mac OS X WebKit в 2004 году [1], питающем такие приложения, как виджеты Dashboard и браузер Safari . Позже, в 2005 году, он был принят в версии 1.8 браузеров Gecko [2] и Opera в 2006 году [3] и стандартизирован рабочей группой Web Hypertext Application Technology Working Group (WHATWG) в новых предлагаемых спецификациях для веб-технологий следующего поколения. [ необходима цитата ]
A canvasсостоит из области, которую можно рисовать, определенной в HTML- коде с атрибутами высоты и ширины . Код JavaScript может получить доступ к области через полный набор функций рисования, аналогичных функциям других распространенных 2D API , что позволяет динамически генерировать графику. Некоторые ожидаемые применения холста включают построение графиков, анимаций , игр и компоновку изображений.
Взаимодействие с холстом подразумевает получение контекста рендеринга холста, который определяет, следует ли использовать API холста, WebGL или контекст рендеринга WebGL2 .
Следующий код создает элемент Canvas на HTML-странице:
< идентификатор холста = "пример" ширина = "200" высота = "200" > Этот текст отображается, если ваш браузер не поддерживает HTML5 Canvas.</ холст >Используя JavaScript , вы можете рисовать на холсте:
var example = document.getElementById ( ' example' ) ; var context = example.getContext ( ' 2d ' ) ; context.fillStyle = ' red ' ; context.fillRect ( 30 , 30 , 50 , 50 ) ; Этот код рисует на экране красный прямоугольник.
API Canvas также предоставляет save()и restore()для сохранения и восстановления всех атрибутов контекста холста.
Холст на самом деле имеет два размера: размер самого элемента и размер поверхности рисования элемента. Установка атрибутов ширины и высоты элемента устанавливает оба этих размера; атрибуты CSS влияют только на размер элемента, а не на поверхность рисования.
По умолчанию размер элемента холста и размер его поверхности рисования составляют 300 пикселей экрана в ширину и 150 пикселей экрана в высоту. В листинге, показанном в примере, который использует CSS для установки размера элемента холста, размер элемента составляет 600 пикселей в ширину и 300 пикселей в высоту, но размер поверхности рисования остается неизменным и составляет значение по умолчанию 300 пикселей × 150 пикселей. Когда размер элемента холста не соответствует размеру его поверхности рисования, браузер масштабирует поверхность рисования, чтобы вместить элемент (что может привести к неожиданным и нежелательным эффектам).
Пример установки разных значений размера элемента и размера поверхности чертежа:
<!DOCTYPE html> < html > < head > < title > Размер элемента Canvas: 600 x 300, Размер поверхности для рисования холста: 300 x 150 </ title > < style > body { background : #dddddd ; } # canvas { margin : 20 px ; padding : 20 px ; background : #ffffff ; border : thin inset #aaaaaa ; width : 600 px ; height : 300 px ; } </ style > </ head > < body > < canvas id = "canvas" > Холст не поддерживается </ холст > </ тело > </ html >SVG — это альтернативный подход к рисованию фигур в браузерах. [4] В отличие от холста, который основан на растре , SVG основан на векторе , поэтому каждая нарисованная фигура запоминается как объект в графе сцены или объектной модели документа , которая впоследствии визуализируется в битовую карту . Это означает, что если атрибуты объекта SVG изменяются, браузер может автоматически повторно визуализировать сцену.
С другой стороны, объекты Canvas рисуются в режиме немедленного отображения. В приведенном выше примере с Canvas операция рисования прямоугольника изменяет Canvas, и его представление в виде прямоугольника забывается системой. Если положение прямоугольника должно было быть изменено, Canvas должен был быть перерисован, включая любые объекты, которые могли быть покрыты прямоугольником. В эквивалентном случае SVG можно было бы просто изменить атрибуты положения прямоугольника, и браузер определил бы, как его перерисовать. Существуют дополнительные библиотеки JavaScript , которые абстрагируют модель Canvas, чтобы иметь возможности сцены, подобные SVG, в элементе Canvas. Также можно использовать несколько слоев Canvas, что означает, что при необходимости изменений нужно будет воссоздавать только определенные слои.
Изображения SVG представлены в формате XML , а сложные сцены можно создавать и поддерживать с помощью инструментов редактирования XML.
Граф сцены SVG позволяет связывать обработчики событийonClick с объектами, поэтому прямоугольник может реагировать на событие. Чтобы получить ту же функциональность с холстом, необходимо вручную сопоставить координаты щелчка мыши с координатами нарисованного прямоугольника, чтобы определить, был ли он нажат.
Концептуально, холст — это API более низкого уровня, на котором могут быть построены интерфейсы более высокого уровня (например, поддержка SVG). Существуют библиотеки JavaScript, которые предоставляют частичные реализации SVG с использованием холста для браузеров, которые не предоставляют SVG, но поддерживают холст, например, браузеры в Android 2.x. Однако обычно это не так — они являются независимыми стандартами. Ситуация осложняется тем, что существуют библиотеки графов сцен для холста, а SVG имеет некоторую функциональность манипуляции растровыми изображениями.
На момент своего появления элемент canvas был встречен неоднозначной реакцией сообщества веб-стандартов. Были высказаны аргументы против решения Apple создать новый фирменный элемент вместо поддержки стандарта SVG . Существуют и другие опасения по поводу синтаксиса, например, отсутствие пространства имен . [5]
14 марта 2007 года разработчик WebKit Дэйв Хайатт переслал электронное письмо от старшего патентного советника Apple Хелен Плотка Уоркман [6], в котором говорилось, что Apple сохраняет за собой все права интеллектуальной собственности относительно рабочего проекта WHATWG Web Applications 1.0 от 24 марта 2005 года, раздел 10.1 под названием «Графика: растровое полотно», [7] но оставляет открытой дверь для лицензирования патентов, если спецификация будет передана в орган по стандартизации с официальной патентной политикой . Это вызвало значительную дискуссию среди веб-разработчиков и подняло вопросы относительно отсутствия у WHATWG политики в отношении патентов по сравнению с явным предпочтением бесплатных лицензий со стороны Консорциума Всемирной паутины (W3C). Позднее Apple раскрыла патенты в соответствии с условиями лицензирования бесплатных патентов W3C. [8] Раскрытие информации означает, что Apple обязана предоставлять бесплатную лицензию на патент всякий раз, когда элемент Canvas становится частью будущей рекомендации W3C, созданной рабочей группой HTML. [9]
Снятие отпечатков пальцев с помощью Canvas — один из методов снятия отпечатков пальцев с помощью браузера для отслеживания пользователей в Интернете, позволяющий веб-сайтам идентифицировать и отслеживать посетителей с помощью элемента HTML5 Canvas. Метод получил широкое освещение в СМИ в 2014 году [10] [11] [12] [13] после того, как исследователи из Принстонского университета и Университета Католического университета Лёвена описали его в своей статье «Сеть никогда не забывает» . [14] Проблемы конфиденциальности, связанные со снятием отпечатков пальцев с помощью Canvas, связаны с тем фактом, что даже удаление файлов cookie и очистка кэша не позволят пользователям избежать отслеживания в Интернете.
Элемент поддерживается текущими версиями Mozilla Firefox , Google Chrome , Internet Explorer , Safari , Konqueror , Opera [15] и Microsoft Edge . [16]