Предыдущий ролик Следующий ролик  

Видео урок: Примеры Canvas, которые используются в этом курсе

HTML5: графика и анимация с Canvas

HTML5 canvas предоставляет много операций по рисованию, которые нужно изучить. Сейчас я хочу провести краткий обзор по тем операциям, которые мы будем изучать в данном курсе. При исследовании HTML5 canvas мы научимся рисовать линии, и вот вы видите этот пример. Это уже законченный пример, который мы создадим. Вы видите, что мы можем рисовать линии, меняя их толщину, они могут по-разному заканчиваться и по-разному присоединяться. Мы рассмотрим, как рисовать дуги. И опять же, это законченный пример, который мы сможем создать, когда изучим соответствующий раздел.

Вот здесь у нас есть дуги. Некоторые из них заполнены. Мы можем написать в canvas текст, используя различные эффекты. У нас есть разные цвета и размеры, мы можем делать окаймление и заполнение, Мы рассмотрим, как рисовать тени, вот это объекты, имеющие тени. Вы видите, что цвет тени и эффект затемнения могут меняться, в зависимости от типа объекта, который мы рисуем. Мы также рассмотрим, как рисовать градиенты, линейные градиенты, как в этом примере, и радиальные градиенты. Затем мы перейдем к более продвинутым вещам, например, рассмотрим, как canvas может использовать разные методы композитинга.

Эти методы композитинга влияют на то, как объекты рисуются в canvas, их двенадцать, и вот вы видите здесь примеры. И опять же, мы их с вами позже создадим. Затем мы изучим трансформации, чтобы перемещать объекты в canvas и влиять на то, как они рисуются. Вы будете поворачивать объекты, масштабировать и перемещать их. Вот здесь объект поворачивается. Позже мы рассмотрим, как это делается. Затем мы перейдем к еще более продвинутым операциям. Я покажу вам, как создавать анимацию, подобную этой, где куб перемещается по голубому canvas, и мы даже научимся создавать что-то еще более продвинутое.

Мы создадим милый маленький проигрыватель для слайд-шоу. Вы видите, что он показывает некоторые рисунки, которые были добавлены в canvas. Итак, это примеры, которые мы создадим, так что вы можете запустить свой редактор кода, потому что мы не будем медлить, а сразу же начнем.