| |
|
|
Анонс: Элемент canvas в HTML5 позволяет добавлять статичные и динамичные изображения, которые создаются на специальной 2d-платформе с декартовой системой координат.
Все статьи:
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104
|
Как использовать в HTML-документах элемент canvas
Info 23.11.2016 - 01:07 Так же, как video и audio, элемент canvas в HTML5 не требует использования абсолютно никаких внешних плагинов. Все, что вам нужно, это небольшой набор кода HTML, приправленный JavaScript и рендеринг 2d-изображения API. Не волнуйтесь, если вы не имеете понятия, что такое рендеринг 2d-контекста API, этот вопрос можно легко найти в Интернете.
Использование элемента canvas не представляет сложности, достаточно записать следующий код:
<canvas width="500" height="500">
</canvas>
В представленном коде важно отметить атрибуты ширины и высоты. Очевидно, они определяют размер элемента canvas, который определяют размер 2d-контекста. Если не прописывать габариты этого элемента, то они будут установлены по умолчанию ширины и высоты 300 на 150, соответственно. Можно создать элемент, который изменяет размер динамически и заполняет все окно браузера.
Положение canvas определяется его местоположением внутри вашего HTML-документа. Его можно перемещать с помощью CSS по мере необходимости, как и другие элементы HTML.
Поддержка браузеров для canvas
Большинство современных браузеров поддерживают этот элемент HTML5 и большинство его функций, но нет ничего удивительного в том, что Internet Explorer не покажет картинку (по крайней мере, не некоторые версии, вышедшие раньше Internet Explorer 9). Если вы готовы мириться с этим фактором, то можете поместить соответствующее резервное сообщение для canvas, которое даст знать немногочисленным пользователям IE знают, что пора обновить версию их браузерп. Другой вариант заключается при использовании фантастического сценария ExplorerCanvas, который был разработан Boffins в Google. Красота этого метода заключается в том, что вам нужно включить в код всего лишь один скрипт, чтобы элемент работал в браузерах Internet Explorer вплоть до версии 9.
Рендеринг 2d-изображения
Canvas выступает в качестве обертки отрендеринного 2d-изображения, предоставляя возможность рисовать и манипулировать им. Это действительно важно понимать, что вы рисуете на отдельном контексте, а не самом элементе. Вы получаете доступ и отображаете 2D-изображение через канвас. 2d-контекст представляет собой стандартный экран на основе чертежной платформы. Как и другие 2d-платформы, она использует плоскую декартову систему координат с началом (0, 0) в верхнем левом углу. Перемещение вправо увеличит значение х, а перемещение вниз – у. Понимание того, как работает система координат, является неотъемлемой частью, если вы хотите рисовать в определенном месте элемента.
|
|
|
|
| |
|
|
