Серия видеоуроков по HTML5 Canvas
Данная статья посвящена видеокурсу по изучению Canvas - элемента HTML5 для создания двухмерных растровых изображений.
Урок 1: Введение
Для начала вам объяснят, зачем нужен Canvas и что будет изучаться в рамках этого курса. Видео носит больше поучительный характер, и если вы хотя бы немного знакомы с данным инструментом, то можете смело переходить к следующему видео.
Уроки 2 - 6: Примеры проектов, где используется Canvas
Здесь вам расскажут о нескольких известных проектах, где используется рассматриваемая нами технология. Среди этих проектов Pirates love Daisies - браузерная видеоигра, Raphael – библиотека js для создания графиков и диаграмм, и т. д.
Уроки 7 - 9: Основы
Установка необходимого ПО - первый шаг. Следующий урок представляет собой краткий обзор изучаемых операций, и в третьем видео вы создадите ваш первый элемент Canvas.
Урок 10: Различия между Canvas и SVG
Проводится сравнительная характеристика двух наиболее распространённых технологий, предназначенных для рисования в браузере 2D изображений, - Canvas и SVG.
Урок 11: Изменение свойств элементов
Вас научат, как изменять свойства тегов Canvas.
Уроки 12 - 18: Базовые техники рисования
Будут рассмотрены:
- Основы рисования;
- Настройка отображения;
- Встроенные геометрические фигуры (прямоугольники и линии);
- Состояние рисования;
- Дуги и контуры;
- Кривые Безье и квадратичные кривые;
- Рисование текста.
Уроки 19 - 22: Продвинутые техники рисования
На этих занятиях речь пойдёт о более сложных техниках рисования. Разбираются такие вещи, как техника создания теней, использование паттернов, создание градиентов и секущих контуров.
Урок 23: Встраивание изображений и видео
На данном уроке нам покажут, как с помощью Canvas можно упростить встраивание изображений и видео в веб-страницу.
Уроки 24 - 27: Трансформации
В первом видео речь пойдёт о том, что такое трансформации и как применять к созданным элементам трансформацию перемещения. На следующих двух уроках вам также расскажут о трансформациях масштабирования и перемещения, и под конец объяснят, как определять свои собственные трансформации.
Урок 28: Метод композитинга по умолчанию и глобальная альфа
Видеоурок, посвящённый работе с глобальными настройками отображения элементов в браузере.
Урок 29: Работа с сырыми пикселями
Изучаем одну из самых мощных возможностей Canvas - рисование сырыми пикселями.
Уроки 30 - 31: Создание слайд-шоу
Учимся создавать слайд-шоу и делать более плавные переходы между слайдами.
Уроки 32 - 33: Анимации
В данном разделе мы научимся основам создания анимации и познакомимся с таким методом, как двойная буферизация.
Уроки 34 - 35: Подведение итогов
Завершающий раздел нашего обучения. Здесь мы применим все полученные знания на практике и посмотрим, чему мы научились за этот курс.
Другие статьи по теме
10 вещей в HTML, о которых вы вряд ли знали
10 вопросов, на которые должен ответить каждый, кто знает HTML