Учебник по Canvas

В этом руководстве описывается, как использовать элемент <canvas> для рисования 2D графики, начиная с основ. Приведенные примеры должны дать вам четкое представление о том, что можно сделать с помощью Canvas, и предоставят фрагменты кода, которые могут помочь вам начать создание собственного контента.

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

Первоначально представленный в WebKit компанией Apple для macOS Dashboard, <canvas> с тех пор был реализован в браузерах. Сегодня все основные браузеры его поддерживают.

Использование элемента <canvas> несложное, но вам необходимо иметь базовое понимание HTML и JavaScript. Элемент <canvas> не поддерживается в некоторых старых браузерах, но поддерживается в последних версиях всех основных браузеров. Размер холста по умолчанию составляет 300 пикселей × 150 пикселей (ширина × высота). Но пользовательские размеры могут быть определены с помощью HTML свойств height и width. Для рисования графики на холсте используется объект контекста JavaScript, который создает графику на лету.

1. Основные принципы
2. Рисование фигур
3. Применение стилей и цветов
4. Рисование текста
5. Использование изображений
6. Преобразования
7. Компоновка и обрезка
8. Основные анимации
9. Расширенные анимации
10. Манипуляции с пикселями
11. Оптимизация холста
12. Заключение

• Страница темы Canvas

Из-за технической ошибки, которая произошла на неделе 17 июня 2013 года, мы потеряли историю этого руководства, включая авторские права всех предыдущих авторов. Мы приносим свои извинения за это и надеемся, что вы простите этот несчастный случай.

• Далее