Элемент холста является частью HTML5 и обеспечивает динамическую визуализацию 2D-форм и растровых изображений с поддержкой сценариев . Это процедурная модель низкого уровня, которая обновляет растровое изображение и не имеет встроенного графа сцены , но через WebGL позволяет отображать трехмерные формы и изображения. HTML5 Canvas также помогает в создании 2D-игр.
История
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 на HTML-странице:
< canvas id = "example" width = "200" height = "200" >Этот текст отображается, если ваш браузер не поддерживает холст HTML5.холст >
Используя JavaScript, вы можете рисовать на холсте:
var example = document . getElementById ( 'пример' ); var context = example . getContext ( '2d' ); контекст . fillStyle = 'красный' ; контекст . fillRect ( 30 , 30 , 50 , 50 );
Этот код рисует на экране красный прямоугольник.
Canvas API также предоставляет save()
и restore()
для сохранения и восстановления всех атрибутов контекста холста.
Размер элемента холста по сравнению с размером поверхности рисования
На самом деле холст имеет два размера: размер самого элемента и размер поверхности рисования элемента. Установка атрибутов ширины и высоты элемента устанавливает оба этих размера; Атрибуты CSS влияют только на размер элемента, но не на поверхность рисования.
По умолчанию размер элемента холста и его поверхности рисования составляет 300 пикселей в ширину и 150 пикселей в высоту. В листинге, показанном в примере, который использует CSS для установки размера элемента холста, размер элемента составляет 600 пикселей в ширину и 300 пикселей в высоту, но размер поверхности рисования остается неизменным при значении по умолчанию 300 пикселей × 150. пикселей. Когда размер элемента холста не соответствует размеру его поверхности рисования, браузер масштабирует поверхность рисования, чтобы соответствовать элементу (что может привести к неожиданным и нежелательным эффектам).
Пример установки различных значений размера элемента и размера поверхности рисования:
< html > < head > < title > Размер элемента холста: 600 x 300, Размер поверхности для рисования: 300 x 150 title > < style > body { background : #dddddd ; } # canvas { margin : 20 пикселей ; отступ : 20 пикселей ; фон : #ffffff ; граница : тонкая вставка #aaaaaa ; ширина : 600 пикселей ; высота : 300 пикселей ; } style > head > < body > < canvas id = "canvas" > Canvas не поддерживается холст > body > html >
Холст против масштабируемой векторной графики (SVG)
SVG - это более ранний стандарт для рисования фигур в браузерах. Однако, в отличие от холста, который основан на растре , SVG является векторным , так что каждая нарисованная фигура запоминается как объект в графе сцены или объектной модели документа , который впоследствии преобразуется в растровое изображение. Это означает, что при изменении атрибутов объекта SVG браузер может автоматически повторно визуализировать сцену.
С другой стороны, объекты Canvas отрисовываются в немедленном режиме . В приведенном выше примере холста, как только прямоугольник нарисован, модель, из которой он был нарисован, забывается системой. Если бы его положение было изменено, пришлось бы перерисовать всю сцену, включая любые объекты, которые могли быть покрыты прямоугольником. Но в эквивалентном случае SVG можно просто изменить атрибуты положения прямоугольника, и браузер определит, как его перерисовать. Существуют дополнительные библиотеки JavaScript, которые добавляют возможности графа сцены к элементу холста. Также можно раскрашивать холст слоями, а затем воссоздавать определенные слои.
Изображения SVG представлены в XML , а сложные сцены можно создавать и поддерживать с помощью инструментов редактирования XML.
Граф сцены SVG позволяет связать обработчики событий с объектами, поэтому прямоугольник может реагировать на onClick
событие. Чтобы получить ту же функциональность с холстом, необходимо вручную сопоставить координаты щелчка мыши с координатами нарисованного прямоугольника, чтобы определить, был ли он нажат.
Концептуально холст - это API нижнего уровня, на котором может быть построен движок, поддерживающий, например, SVG. Существуют библиотеки JavaScript, которые обеспечивают частичную реализацию SVG с использованием холста для браузеров, которые не предоставляют SVG, но поддерживают холст, например браузеры в Android 2.x. Однако обычно это не так - это независимые стандарты. Ситуация осложняется тем, что для холста существуют библиотеки графов сцены, а в SVG есть некоторые функции обработки растровых изображений.
Реакции
Во время своего появления элемент холста был встречен неоднозначной реакцией со стороны сообщества веб-стандартов. Были аргументы против решения Apple создать новый проприетарный элемент вместо поддержки стандарта SVG . Есть и другие проблемы, связанные с синтаксисом, например отсутствие пространства имен . [4]
Интеллектуальная собственность на холсте
14 марта 2007 года разработчик WebKit Дэйв Хаятт отправил электронное письмо от старшего патентного советника Apple Хелен Плотка Уоркман [5], в котором говорилось, что Apple сохраняет за собой все права интеллектуальной собственности на рабочий проект WHATWG Web Applications 1.0 от 24 марта 2005 года Раздел 10.1, озаглавленный «Графика: растровое изображение», [6], но оставил дверь открытой для лицензирования патентов, если спецификация будет передана в орган по стандартизации с официальной патентной политикой . Это вызвало широкую дискуссию среди веб-разработчиков и подняло вопросы относительно отсутствия у WHATWG политики в отношении патентов по сравнению с явным предпочтением консорциума World Wide Web (W3C) бесплатных лицензий. Позднее Apple раскрыла патенты в соответствии с условиями лицензирования W3C без лицензионных отчислений. [7] Раскрытие означает, что Apple обязана предоставлять бесплатную лицензию на патент всякий раз, когда элемент Canvas становится частью будущей рекомендации W3C, созданной рабочей группой HTML. [8]
Проблемы конфиденциальности
Холст дактилоскопия является одним из ряда браузера дактилоскопии методов отслеживания онлайн - пользователей , которые позволяют веб - сайтам , чтобы идентифицировать и отслеживать посетитель , используя HTML5 холст элемент. Этот метод получил широкое освещение в СМИ в 2014 году [9] [10] [11] [12] после того, как исследователи из Принстонского университета и Университета Лёвенского университета описали его в своей статье «Сеть никогда не забывает» . [13] Проблемы конфиденциальности касательно снятия отпечатков пальцев на холсте связаны с тем фактом, что даже удаления файлов cookie и очистки кеша пользователям будет недостаточно, чтобы избежать онлайн-отслеживания.
Поддержка браузера
Элемент поддерживается текущими версиями Mozilla Firefox , Google Chrome , Internet Explorer , Safari , Konqueror , Opera [14] и Microsoft Edge . [15]
Смотрите также
- Антизерновая геометрия (AGG)
- Каир (графика)
- Сравнение движков верстки (HTML5 Canvas)
- Показать PostScript
- Интерфейс графического устройства (GDI +)
- Кварц 2D
- WebGL
Рекомендации
- ^ Ян Хикси (2004-07-12). «Расширение HTML» . Проверено 13 июня 2011 .
- ^ Подключение разработчика Mozilla. "HTMLCanvasElement" . Архивировано из оригинала на 2011-06-04 . Проверено 13 июня 2011 .
- ^ «Список изменений Opera 9.0» . Архивировано из оригинала на 2012-09-10 . Проверено 20 июня 2006 .
- ^ Замечания Яна Хиксона относительно Canvas и других расширений Apple для HTML
- ^ «[whatwg] Проект веб-приложений 1.0, Дэвид Хаятт, среда, 14 марта, 14:31:53 PDT 2007» . Архивировано из оригинала на 2007-05-02 . Проверено 1 мая 2007 .
- ^ Веб-приложения 1.0 Ранний рабочий черновик - Динамическая графика: растровый холст
- ^ Статус патентной политики рабочей группы HTML - известные раскрытия
- ^ Патентная политика W3C, используемая рабочей группой HTML
- ^ Книббс, Кейт (21 июля 2014 г.). «Что вам нужно знать о самом хитром новом инструменте онлайн-отслеживания» . Gizmodo . Проверено 21 июля 2014 года .
- ^ Джозеф Стейнберг (23 июля 2014 г.). «Вас отслеживают в Интернете хитрые новые технологии - вот что вам нужно знать» . Forbes . Проверено 15 ноября 2014 года .
- ^ Ангвин, Джулия (21 июля 2014 г.). «Познакомьтесь с устройством онлайн-слежения, которое практически невозможно заблокировать» . ProPublica . Проверено 21 июля 2014 года .
- ^ Кирк, Джереми (21 июля 2014 г.). «Скрытые инструменты отслеживания в Интернете создают для пользователей повышенные риски конфиденциальности» . Мир ПК . Проверено 21 июля 2014 года .
- ^ Акар, Гунес; Юбэнк, Кристиан; Энглехардт, Стивен; Хуарес, Марк; Нараянан, Арвинд; Диас, Клаудия (24 июля 2014 г.). «Интернет никогда не забывает: постоянные механизмы отслеживания в дикой природе» . Проверено 24 июля 2014 года .
- ^ Сукан, Михай (4 февраля 2010 г.). «SVG или Canvas? Выбор между ними» . Программное обеспечение Opera . Архивировано из оригинального 23 июня 2010 года . Проверено 3 мая 2010 года .
- ^ «Холст, документация Microsoft Edge» .
Внешние ссылки
- canvasЭлемент , W3C , 2014-10-28 , извлекаются 2015-01-09
- HTML Canvas 2D Context , W3C , 21 августа 2014 г. , получено 9 января 2015 г.
- Описание холста в черновиках спецификаций веб-приложений WHATWG
- Справочная страница Canvas в Apple Developers Connection
- Базовое руководство по Canvas в сообществе разработчиков Opera
- Руководство по Canvas и вводная страница в Центре разработчиков Mozilla