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

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

Хотя холст HTML5 предлагает собственный API для 2D-рисования , он также поддерживает API WebGL , позволяющий осуществлять 3D-рендеринг с помощью OpenGL ES .

История

Первоначально Canvas был представлен Apple для использования в их собственном компоненте Mac OS X WebKit в 2004 году. ^[1] работа таких приложений, как Dashboard виджеты и браузер Safari . Позже, в 2005 году, он был принят в браузерах Gecko версии 1.8 . ^[2] и Опера в 2006 году, ^[3] и стандартизирован Рабочей группой по технологиям веб-гипертекстовых приложений (WHATWG) по новым предлагаемым спецификациям для веб-технологий следующего поколения. ^{[ нужна ссылка ]}

Использование

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

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

Пример

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

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

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

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

Этот код рисует красный прямоугольник на экране.

Canvas API также предоставляет save() и restore(), для сохранения и восстановления всех атрибутов контекста холста.

Размер элемента холста в зависимости от размера поверхности рисования

На самом деле холст имеет два размера: размер самого элемента и размер поверхности рисования элемента. Установка атрибутов ширины и высоты элемента устанавливает оба этих размера; Атрибуты CSS влияют только на размер элемента, а не на поверхность рисования.

По умолчанию размер элемента холста и размер его поверхности рисования составляют 300 пикселей в ширину и 150 пикселей в высоту. В листинге, показанном в примере, где используется CSS для установки размера элемента холста , размер элемента составляет 600 пикселей в ширину и 300 пикселей в высоту, но размер поверхности рисования остается неизменным со значением по умолчанию 300 пикселей × 150. пикселей. Когда размер элемента холста не соответствует размеру его поверхности рисования, браузер масштабирует поверхность рисования в соответствии с размером элемента (что может привести к неожиданным и нежелательным эффектам).

Пример установки разных значений размера элемента и размера поверхности рисования:

<!DOCTYPE html>
<html>
    <head>
    <title>Canvas element size: 600 x 300,
    Canvas drawing surface size: 300 x 150</title>
    <style>
        body {
            background: #dddddd;
        }
        #canvas {
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;
            height: 300px;
        }
    </style>
    </head>
    <body>
        <canvas id="canvas">
        Canvas not supported
        </canvas>
    </body>
</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 Web Applications 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]

См. также

Ссылки

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

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

The canvas элемент , W3C , 28 октября 2014 г. , получено 9 января 2015 г.
HTML Canvas 2D Context , W3C , 21 августа 2014 г. , получено 9 января 2015 г.
Описание холста в черновых спецификациях веб-приложений WHATWG.
Справочная страница Canvas в Apple Developers Connection
Базовое руководство по Canvas в сообществе разработчиков Opera
Учебное пособие по Canvas и вводная страница в Центре разработчиков Mozilla. Архивировано 3 августа 2012 г. на Wayback Machine.

[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.

[Knibbs-10] Ниббс, Кейт (21 июля 2014 г.). «Что нужно знать о самом хитром новом инструменте онлайн-отслеживания» . Гизмодо . Проверено 21 июля 2014 г.

[Steinberg-11] Джозеф Стейнберг (23 июля 2014 г.). «За вами следят в Интернете с помощью новой хитрой технологии — вот что вам нужно знать» . Форбс . Проверено 15 ноября 2014 г.

[Angwin-12] Ангвин, Джулия (21 июля 2014 г.). «Знакомьтесь с онлайн-устройством слежения, которое практически невозможно заблокировать» . ПроПублика . Проверено 21 июля 2014 г.

[Kirk-13] Кирк, Джереми (21 июля 2014 г.). «Инструменты скрытного веб-отслеживания создают все больший риск для конфиденциальности пользователей» . Мир ПК . Проверено 21 июля 2014 г.

[WebNeverForgets-14] Ачар, Гюнес; Юбенк, Кристиан; Энглхардт, Стивен; Хуарес, Марк; Нарайанан, Арвинд; Диас, Клаудия (24 июля 2014 г.). «Сеть никогда не забывает: постоянные механизмы отслеживания в дикой природе» . Проверено 24 июля 2014 г.

[15] Сукан, Михай (4 февраля 2010 г.). «SVG или Canvas? Выбираем между двумя» . Программное обеспечение Опера . Архивировано из оригинала 23 июня 2010 года . Проверено 3 мая 2010 г.

[16] «Canvas, документация Microsoft Edge» .

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]

[15]

[16]