Тутorial по HTML Canvas

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

Upper graphic was created using <canvas>.

Он显示了四个元素：красный прямоугольник, градиентный прямоугольник, многоцветный прямоугольник и многоцветный текст.

Что такое HTML Canvas?

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

Элемент <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="myCanvas" width="200" height="100"></canvas>

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

Свойства width и height необходимы для определения размера канваса.

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

По умолчанию, элемент <canvas> не имеет рамки и содержимого.

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

Пример

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Попробуйте сами

Следующие разделы расскажут о том, как рисовать на канвасе.

Дополнительная информация:

Полное руководство по Canvas от CodeW3C.com

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

<canvas> элемент является частью стандарта HTML5 (2014).

Все современные браузеры поддерживают <canvas>：