Данная статья посвящена видеокурсу по изучению 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