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

Видео урок: Создание слайдшоу

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

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

Давайте посмотрим, как это делается. Это я закрываю и открываю начальную версию моего редактора. Вот SlideShow_start. Давайте перейдем к snippets. Вот нужный нам файл. Я в разделе Slideshow. А теперь давайте начнем создавать слайдшоу. Итак, у меня есть пустой документ с меткой-заменителем для скрипта. Я копирую эти первые несколько строк и вставляю их.

Это просто некоторый код для инициализации и установки. Давайте быстренько его рассмотрим. Здесь у меня есть массив, в котором находятся пути ко всем изображениям, которые я собираюсь показать в слайдшоу. У меня есть несколько переменных, которые ссылаются на canvas для слайдшоу и его контекст, и я создаю новый элемент image, используя DOM, а также у меня есть маленький индексатор, который отслеживает текущее изображение. Все это касается установки. Далее идет функция, и мы копируем вот это.

Мы настраиваем функцию так, чтобы она запускалась, когда загружается окно. И самое первое, что мы делаем, это получаем ссылку на canvas. Мы уже делали это раньше через название, и здесь у нас есть ссылка на контекст canvas. Затем мы устанавливаем ширину и высоту вновь созданного элемента image, чтобы они были 600 x 400, и это будет размер изображений. Затем мы вызываем функцию switchImage, и здесь у нас есть интервал, который мы используем, чтобы переходить от слайда к слайду каждые 3,000 миллисекунд, или три секунды.

Давайте продолжим и скопируем вот это. Теперь у нас есть функция switchImage. Функция переключения изображений просто устанавливает исходник объекта image на то, на что смотрит текущий индексатор в массиве путей к изображениям. Все будет идти по кругу. Вот путь. Начнется все с 0, затем будет переход к 1, затем к 2 и так далее.

Функция switchImage отвечает за "тяжелую атлетику" примера. Оно отображает текущий слайд и смотрит на изображение в массиве, которое на данный момент индексируется счетчиком currentImage. С этого момента у нас есть пути к изображениям 0, 1, 2 и так далее. То есть, первое, что она делает, это устанавливает атрибут source объекта image на путь, на который смотрит счетчик currentImage. Когда это изображение загружается, запускается функция, и она проверяет, является ли счетчик текущего изображения больше, чем длина массива путей, потому что если это так, нам нужно сбросить его на 0 и начать все сначала.

Затем мы вызываем функцию drawImage для контекста canvas, чтобы нарисовать в canvas изображение заданной ширины и высоты, начав с левого верхнего угла. А затем, из-за интервала будет вызываться функция switchImage каждый раз, когда срабатывает таймер, а этот таймер мы установили на три секунды. Итак, каждые три секунды счетчик увеличивается на единицу, и тогда в canvas рисуется следующее изображение. Давайте сохраним это и вернемся в браузер.

Вы видите, что каждые три секунды меняется слайд. Вот это последнее изображение. И через три секунды должно снова появиться первое, и оно появляется. Это довольно простой пример использования таймера интервала и функции drawImage для создания слайдшоу.