Учебник по холсту HTML

Элемент HTML <canvas> используется для рисования графики на веб-странице.

Графика выше создана с помощью <canvas>.

Он показывает четыре элемента: красный прямоугольник, градиентный прямоугольник, многоцветный прямоугольник и многоцветный текст.

Что такое холст HTML?

HTML-элемент <canvas> используется для рисования графики «на лету» с помощью сценариев (обычно JavaScript).

Элемент <canvas> — это только контейнер для графики. Вы должны использовать сценарий, чтобы на самом деле нарисовать графику.

Canvas имеет несколько методов для рисования контуров, прямоугольников, кругов, текста и добавления изображений.

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

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает элемент <canvas>.

HTML Canvas может рисовать текст

Canvas может рисовать цветной текст с анимацией или без нее.

HTML Canvas может рисовать графику

Canvas имеет отличные возможности для графического представления данных с изображением графиков и диаграмм.

HTML Canvas можно анимировать

Объекты холста могут двигаться. Возможно все: от простых прыгающих мячей до сложных анимаций.

HTML Canvas может быть интерактивным

Canvas может реагировать на события JavaScript.

Canvas может реагировать на любые действия пользователя (нажатия клавиш, щелчки мышью, нажатия кнопок, движения пальцев).

HTML Canvas можно использовать в играх

Методы Canvas для анимации предлагают множество возможностей для игровых HTML-приложений.

Пример холста

В HTML элемент <canvas> выглядит так:

Элемент <canvas> должен иметь атрибут id, чтобы на него мог ссылаться JavaScript.

Атрибуты ширины и высоты необходимы для определения размера холста.

Совет. На одной HTML-странице может быть несколько элементов <canvas>.

Чтобы добавить границу, используйте атрибут стиля:

В следующих главах показано, как рисовать на холсте.