HTML Canvas Учебник

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

Изображение выше создано с помощью элемента <canvas>.

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

Что такое HTML Canvas?

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

Элемент <canvas> - это всего лишь контейнер для графики. Необходимо использовать скрипт для рисования графики.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Canvas Пример

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

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

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

Примечание: Возможно использовать несколько элементов <canvas> на HTML странице.

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

В следующих главах учебника на нашем сайте W3Schools на русском показано, как рисовать с помощью элемента canvas.