Войти
Элемент холста является частью HTML5 и позволяет выполнять динамическое скриптование рендеринга 2D-форм и растрового изображения изображений. Это низкоуровневая процедурная модель, которая обновляет растровое изображение и не имеет встроенного графа сцены, но через WebGL она позволяет создавать трехмерные формы и изображения. для отображения. HTML5 Canvas также помогает в создании 2D-игр.
Первоначально Canvas был представлен Apple для использования в их собственном компоненте Mac OS X WebKit в 2004 году, обеспечивающем работу таких приложений, как виджеты Dashboard и Safari браузер. Позже, в 2005 году, он был принят в версии 1.8 браузеров Gecko и Opera в 2006 году и стандартизирован Рабочей группой по технологиям веб-гипертекстовых приложений (WHATWG). о новых предлагаемых спецификациях для веб-технологий следующего поколения.
A холстсостоит из области рисования, определенной в коде HTML с атрибутами высоты и ширины. Код JavaScript может обращаться к области с помощью полного набора функций рисования, аналогичных функциям других распространенных 2D-API, что позволяет динамически генерировать графику. Некоторые ожидаемые варианты использования холста включают построение графиков, анимацию, игры и композицию изображений.
Следующий код создает элемент Canvas на странице HTML:
Используя JavaScript, вы можете рисовать на холсте:
var example = document.getElementById ('example'); var context = example.getContext ('2d'); context.fillStyle = 'красный'; context.fillRect (30, 30, 50, 50);Этот код рисует красный прямоугольник на экране.
Canvas API также предоставляет save ()и restore ()для сохранения и восстановления всех атрибутов контекста холста.
На самом деле холст имеет два размера: размер самого элемента и размер поверхности рисования элемента. Установка атрибутов ширины и высоты элемента устанавливает оба этих размера; Атрибуты CSS влияют только на размер элемента, но не на поверхность рисования.
По умолчанию размер элемента холста и размер его поверхности рисования составляет 300 пикселей в ширину и 150 пикселей в высоту. В листинге, показанном в примере, который использует CSS для установки размера элемента холста, размер элемента составляет 600 пикселей в ширину и 300 пикселей в высоту, но размер поверхности рисования остается неизменным при значении по умолчанию 300 пикселей × 150. пикселей. Когда размер элемента холста не соответствует размеру его поверхности рисования, браузер масштабирует поверхность рисования, чтобы соответствовать элементу (что может привести к неожиданным и нежелательным эффектам).
Пример установки различных значений размера элемента и размера поверхности рисования:
Размер элемента холста: 600 x 300, размер поверхности рисования холста: 300 x 150
SVG - это более ранний стандарт для рисования фигур в браузерах. Однако, в отличие от холста, который основан на растре, SVG основан на векторе, так что каждая нарисованная фигура запоминается как объект в графе сцены или Объектная модель документа, которая впоследствии преобразуется в растровое изображение. Это означает, что если атрибуты объекта SVG изменены, браузер может автоматически повторно визуализировать сцену.
Объекты холста, с другой стороны, отрисовываются в немедленном режиме. В приведенном выше примере холста, когда прямоугольник нарисован, система забывает модель, из которой он был нарисован. Если бы его положение было изменено, пришлось бы перерисовать всю сцену, включая любые объекты, которые могли быть покрыты прямоугольником. Но в эквивалентном случае SVG можно просто изменить атрибуты положения прямоугольника, и браузер определит, как его перерисовать. Существуют дополнительные библиотеки JavaScript, которые добавляют возможности графа сцены к элементу холста. Также можно раскрашивать холст слоями, а затем воссоздавать определенные слои.
Изображения SVG представлены в XML, а сложные сцены можно создавать и поддерживать с помощью инструментов редактирования XML.
Граф сцены SVG позволяет связывать обработчики событий с объектами, поэтому прямоугольник может реагировать на событие onClick. Чтобы получить ту же функциональность с холстом, необходимо вручную сопоставить координаты щелчка мыши с координатами нарисованного прямоугольника, чтобы определить, был ли он нажат.
Концептуально холст - это API нижнего уровня, на котором может быть построен движок, поддерживающий, например, SVG. Существуют библиотеки JavaScript, которые предоставляют частичные реализации SVG с использованием холста для браузеров, которые не предоставляют SVG, но поддерживают холст, например браузеры в Android 2.x. Однако обычно это не так - это независимые стандарты. Ситуация осложняется тем, что для холста существуют библиотеки графов сцены, а в SVG есть некоторые функции обработки растровых изображений.
Во время своего появления элемент холста был встречен неоднозначной реакцией со стороны сообщества веб-стандартов. Были аргументы против решения Apple создать новый частный элемент вместо поддержки стандарта SVG. Есть и другие проблемы с синтаксисом, такие как отсутствие пространства имен .
14 марта 2007 г. разработчик WebKit Дэйв Хаятт отправил электронное письмо от Старший патентный поверенный Apple, Хелен Плотка Уоркман, заявила, что Apple сохраняет за собой все права интеллектуальной собственности в отношении рабочего проекта WHATWG Web Applications 1.0 от 24 марта 2005 г., раздел 10.1, озаглавленный «Графика: растровое изображение»., но оставил открытой дверь для лицензирования патентов, если спецификация будет передана в орган по стандартизации с официальной патентной политикой. Это вызвало широкую дискуссию среди веб-разработчиков и подняло вопросы относительно отсутствия у WHATWG политики в отношении патентов по сравнению с явным предпочтением Консорциума Всемирной паутины (W3C) без лицензионных отчислений. Позже Apple раскрыла патенты в соответствии с условиями лицензирования W3C без лицензионных отчислений. Раскрытие означает, что Apple обязана предоставлять бесплатную лицензию на патент всякий раз, когда элемент Canvas становится частью будущей рекомендации W3C, созданной рабочей группой HTML.
Canvas fingerprinting является одним из множества методов снятия отпечатков пальцев браузера для отслеживания онлайн-пользователей, которые позволяют веб-сайтам идентифицировать и отслеживать посетителей с помощью элемента HTML5 холста. Этот метод получил широкое освещение в СМИ в 2014 году после того, как исследователи из Принстонского университета и Левенского университета описали его в своей статье «Сеть никогда не забывает». Проблемы конфиденциальности, связанные со снятием отпечатков пальцев на холсте, связаны с тем, что даже удаления файлов cookie и очистки кеша пользователям будет недостаточно, чтобы избежать онлайн-отслеживания.
Элемент поддерживается текущими версиями Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror, Opera и Microsoft Edge.
canvas, W3C, 2014-10-28, получено 09.01.2015