HTML элемент <canvas> используется для рисования графических объектов на веб-странице.
Графика, которую вы можете видеть выше, создана при помощи элемента <canvas>.
Здесь представлены четыре графических объекта: красный прямоугольник, градиентный прямоугольник, многоцветный прямоугольник и многоцветный текст.
Что такое canvas?
HTML элемент <canvas> или растровый холст используется для рисования графических объектов на лету при помощи скриптов (обычно на JavaScript).
Элемент <canvas> - это всего лишь контейнер для графики. Чтобы нарисовать какой-нибудь графический объект в действительности необходимо использовать специальный скрипт. Для этого у canvas есть несколько методов, которые позволяют нарисовать контуры, прямоугольники, окружности, вывести текст и добавить изображения.
В элементе <canvas> можно вывести текст, анимированный или нет.
Элемент <canvas> обладает богатыми возможностями для графического представления данных при помощи диаграмм, графиков и схем.
Объекты элемента <canvas> могут двигаться. Возможно все: от прыгающих мячей до сложной анимации.
Элемент <canvas> может быть интерактивным и реагировать на события JavaScript. Элемент <canvas> может отвечать на любое действие пользователя: нажатие на клавишу, на кнопку мыши, на элемент кнопки на веб-страницы, на движение пальца и т.д.
Элемент <canvas> может использоваться для создания игр. Методы элемента <canvas> для анимирования графических объектов предоставляют богатые возможности для создания игровых HTML приложений.
Пример элемента <canvas>
В HTML определение элемента <canvas> выглядит следующим образом:
<canvas id="myCanvas" width="200" height="100"></canvas>
У элемента <canvas> должен быть определен атрибут id, чтобы можно было получить к нему доступ в скрипте JavaScript.
Атрибуты width и height необходимы для определения размеров (ширины и высоты) элемента.
Примечание: На HTML странице можно определять любое количество элементов <canvas>.
По умолчанию, элемент <canvas> не имеет рамки и содержимого.
Чтобы добавить рамку, используйте CSS стили, например, в атрибуте style:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
В следующей главе вы узнаете, как рисовать в элементе <canvas>.
