stringtranslate.com

Элемент холста

Элемент холста является частью HTML5 и позволяет выполнять динамический рендеринг двумерных фигур и растровых изображений с возможностью использования сценариев . Это процедурная модель низкого уровня, которая обновляет растровое изображение . HTML5 Canvas также помогает в создании 2D-игр .

Хотя холст HTML5 предлагает собственный 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] и стандартизирован Рабочей группой по технологиям веб-гипертекстовых приложений (WHATWG) по новым предлагаемым спецификациям для веб-технологий следующего поколения. [ нужна цитата ]

Применение

A canvasсостоит из рисуемой области, определенной в HTML- коде с атрибутами высоты и ширины . Код JavaScript может получить доступ к этой области через полный набор функций рисования, аналогичных функциям других распространенных 2D API , что позволяет создавать динамически генерируемую графику. Некоторые ожидаемые варианты использования холста включают построение графиков, анимацию , игры и композицию изображений.

Взаимодействие с холстом включает получение контекста рендеринга холста, который определяет, следует ли использовать контекст рендеринга Canvas API, WebGL или WebGL2 .

Пример

Следующий код создает элемент Canvas на странице HTML:

< canvas  id = «пример»  ширина = «200»  высота = «200» >Этот текст отображается, если ваш браузер не поддерживает HTML5 Canvas.</ холст >

Используя JavaScript , вы можете рисовать на холсте:

вар пример = документ . getElementById ( «пример» ); вар контекст = пример . getContext ( '2d' ); контекст . fillStyle = 'красный' ; контекст . 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 ; } # холст { маржа : 20 пикселей ; отступ : 20 пикселей ; фон : #ffffff ; граница : тонкая вставка #aaaaaa ; ширина : 600 пикселей ; высота : 300 пикселей ; } </ style > </ head > < body > < Canvas id = "canvas" >                            Холст не поддерживается </ холст >  </ тело > </ html >

Холст против масштабируемой векторной графики (SVG)

SVG — это альтернативный подход к рисованию фигур в браузерах. [4] В отличие от холста, который основан на растре , SVG основан на векторе , поэтому каждая нарисованная фигура запоминается как объект в графе сцены или объектной модели документа , который впоследствии преобразуется в растровое изображение . Это означает, что если атрибуты объекта SVG изменяются, браузер может автоматически повторно отобразить сцену.

С другой стороны, объекты Canvas рисуются в немедленном режиме . В приведенном выше примере холста операция рисования прямоугольника изменяет холст, и его представление в виде прямоугольника забывается системой. Если бы положение прямоугольника нужно было изменить, пришлось бы перерисовать холст, включая все объекты, которые могли быть покрыты прямоугольником. В эквивалентном случае SVG можно просто изменить атрибуты положения прямоугольника, и браузер определит, как его перерисовать. Существуют дополнительные библиотеки JavaScript , которые абстрагируют модель холста, чтобы иметь возможности сцены, подобные SVG, внутри элемента холста. Также можно использовать несколько слоев холста, а это означает, что при необходимости изменений необходимо воссоздавать только определенные слои.

Изображения SVG представлены в формате XML , а сложные сцены можно создавать и поддерживать с помощью инструментов редактирования XML.

Граф сцены SVG позволяет связывать обработчики событий с объектами, поэтому прямоугольник может реагировать на onClickсобытие. Чтобы получить ту же функциональность с холстом, необходимо вручную сопоставить координаты щелчка мыши с координатами нарисованного прямоугольника, чтобы определить, был ли по нему щелкнут.

Концептуально Canvas — это API более низкого уровня, на основе которого могут быть построены интерфейсы более высокого уровня (например, поддержка SVG). Существуют библиотеки JavaScript, которые предоставляют частичную реализацию SVG с использованием холста для браузеров, которые не предоставляют SVG, но поддерживают холст, например браузеры в Android 2.x. Однако обычно это не так — это независимые стандарты. Ситуация осложняется тем, что для холста существуют библиотеки графов сцен, а у SVG есть некоторая функциональность по манипуляции с растровыми изображениями.

Реакции

На момент своего появления элемент Canvas был встречен неоднозначной реакцией сообщества веб-стандартистов. Были аргументы против решения Apple создать новый проприетарный элемент вместо поддержки стандарта SVG . Есть и другие опасения по поводу синтаксиса, например отсутствие пространства имен . [5]

Интеллектуальная собственность на холсте

14 марта 2007 г. разработчик WebKit Дэйв Хаятт переслал электронное письмо от старшего патентного юриста Apple Хелен Плотка Уоркман [6] , в котором говорилось, что Apple оставляет за собой все права интеллектуальной собственности в отношении рабочего проекта веб-приложений WHATWG 1.0 от 24 марта 2005 г. Раздел 10.1, озаглавленный «Графика: растровое полотно», [7] , но оставил дверь открытой для лицензирования патентов, если спецификация будет передана в орган по стандартизации с официальной патентной политикой . Это вызвало бурную дискуссию среди веб-разработчиков и вызвало вопросы относительно отсутствия у WHATWG политики в отношении патентов по сравнению с явным предпочтением безвозмездных лицензий со стороны Консорциума Всемирной паутины (W3C). Позже Apple раскрыла данные о патентах в соответствии с условиями бесплатного патентного лицензирования W3C. [8] Раскрытие информации означает, что Apple обязана предоставлять бесплатную лицензию на патент всякий раз, когда элемент Canvas становится частью будущей рекомендации W3C, созданной рабочей группой HTML. [9]

Проблемы конфиденциальности

Снятие отпечатков пальцев на холсте — это один из многих методов снятия отпечатков пальцев в браузере для отслеживания онлайн-пользователей, которые позволяют веб-сайтам идентифицировать и отслеживать посетителей с помощью элемента холста HTML5 . Этот метод получил широкое освещение в СМИ в 2014 году, [10] [11] [12] [13] после того, как исследователи из Принстонского университета и университета Левена описали его в своей статье «Сеть никогда не забывает ». [14] Проблемы конфиденциальности, связанные со снятием отпечатков пальцев на холсте, связаны с тем фактом, что даже удаление файлов cookie и очистка кэша не позволят пользователям избежать онлайн-отслеживания.

Поддержка браузера

Элемент поддерживается текущими версиями Mozilla Firefox , Google Chrome , Internet Explorer , Safari , Konqueror , Opera [15] и Microsoft Edge . [16]

Смотрите также

Рекомендации

  1. ^ Ян Хикси (12 июля 2004 г.). «Расширение HTML» . Проверено 13 июня 2011 г.
  2. ^ Связь с разработчиками Mozilla. «HTMLCanvasElement». Архивировано из оригинала 4 июня 2011 г. Проверено 13 июня 2011 г.
  3. ^ «Журнал изменений Opera 9.0» . Архивировано из оригинала 10 сентября 2012 г. Проверено 20 июня 2006 г.
  4. ^ «Масштабируемая векторная графика | CorelDRAW» . www.coreldraw.com . Проверено 23 сентября 2022 г.
  5. ^ Замечания Яна Хиксона относительно Canvas и других расширений Apple для HTML.
  6. ^ «[whatwg] Проект веб-приложений 1.0, Дэвид Хаятт, среда, 14 марта, 14:31:53 по тихоокеанскому времени 2007» . Архивировано из оригинала 2 мая 2007 г. Проверено 1 мая 2007 г.
  7. ^ Веб-приложения 1.0, ранний рабочий проект - Динамическая графика: растровое полотно
  8. ^ Статус патентной политики Рабочей группы HTML - Известные раскрытия информации
  9. ^ Патентная политика W3C, используемая рабочей группой HTML.
  10. ↑ Ниббс, Кейт (21 июля 2014 г.). «Что нужно знать о самом хитром новом инструменте онлайн-отслеживания» . Гизмодо . Проверено 21 июля 2014 г.
  11. ↑ Джозеф Стейнберг (23 июля 2014 г.). «Вас отслеживают в Интернете с помощью новой хитрой технологии — вот что вам нужно знать». Форбс . Проверено 15 ноября 2014 г.
  12. ↑ Ангвин, Джулия (21 июля 2014 г.). «Знакомьтесь, устройство онлайн-слежения, которое практически невозможно заблокировать». ПроПублика . Проверено 21 июля 2014 г.
  13. ↑ Кирк, Джереми (21 июля 2014 г.). «Инструменты скрытного веб-отслеживания создают повышенный риск для конфиденциальности пользователей». Мир ПК . Проверено 21 июля 2014 г.
  14. ^ Акар, Гюнес; Юбенк, Кристиан; Энглхардт, Стивен; Хуарес, Марк; Нарайанан, Арвинд; Диас, Клаудия (24 июля 2014 г.). «Сеть никогда не забывает: постоянные механизмы отслеживания в дикой природе» . Проверено 24 июля 2014 г.
  15. ↑ Сукан, Михай (4 февраля 2010 г.). «SVG или Canvas? Выбираем между двумя». Программное обеспечение Опера . Архивировано из оригинала 23 июня 2010 года . Проверено 3 мая 2010 г.
  16. ^ «Холст, документация Microsoft Edge» .

Внешние ссылки