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

Видео урок: Рисование при помощи паттернов

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

HTML5 элемент canvas упрощает рисование при помощи паттернов. По факту, операции по рисованию, которые используют стили fill и stroke, могут принимать паттерны, а также градиенты в качестве настроек. Вы создаете паттерн из рисунка, видео или элемента canvas. Если вы используете рисунок, который является анимационным рисунком, паттерн, который вы создадите, будет использовать рамку анимационного рисунка в качестве паттерна. Если рамки в анимационном рисунке нет, он будет использовать первую рамку анимации.

В видео для паттерна используется текущая рамка воспроизведения. Это не видео в реальном времени; просто берется рамка и используется в качестве паттерна. В какой бы точке не создавался паттерн, canvas выберет подходящую рамку, которая будет нарисована в этой точке, и будет ее использовать в качестве паттерна. Паттерны могут воспроизводиться. Они вообще могут не воспроизводиться или воспроизводиться в двух измерениях, либо только в измерении X или Y. Создать паттерн довольно просто; обычно вы используете функции createPattern.

createPattern принимает два аргумента. Первый аргумент - это элемент, и это может быть рисунок, видео или элемент canvas. Второй аргумент - это одна из этих четырех строк: no-repeat, repeat, repeat-x или repeat-y - очень похоже на любое CSS свойство для заднего фона, которое вы устанавливаете для рисунка. Теперь давайте перейдем к коду и посмотрим на реальные паттерны. Ок, вот я в коде. Раздел Patterns папки Snippets, открываю файл patterns_start главы 06.

Давайте попробуем создать несколько паттернов. Сперва я хочу создать паттерн из рисунка. Копирую отсюда этот пример и вставляю его, сохраняю. Чтобы создать паттерн из рисунка, я создаю новый объект рисунка, используя DOM, а затем загружаю рисунок. Поскольку рисунки могут медленно загружаться по сети, если я просто попытаюсь создать паттерн на лету, я могу получить ошибку, поскольку рисунок еще не подгрузился.

Чтобы избежать этого, я использую здесь функцию onload. Когда функция onload завершает работу, вызывается метод createPattern, а затем мы заполняем прямоугольник canvas прямоугольником, который использует его fillStyle в качестве паттерна рисунка. Вот рисунок, который мы будем использовать. И если мы посмотрим на примеры, это вот этот маленький рисунок. Мы покроем задний фон canvas этим рисунком. Давайте продолжим и сделаем это. То есть, мы создаем рисунок. Мы устанавливаем функцию onload. Затем мы указываем источник этого рисунка в качестве пути к этому рисунку. Это позволит рисунку загрузиться. Когда загрузка завершена, вызывается эта функция.

Затем мы используем fillStyle, вставляем результаты функции createPattern в fillStyle, а затем заполняем прямоугольник, начиная от верхнего левого угла canvas, затем по всей ширине и высоте. Давайте сохраним это и посмотрим. И вы видите, что здесь у нас симпатичный маленький воспроизводящийся рисунок. Если вы напишете repeat-x, сохраните и обновите, верно, у нас будет только движение по оси X.

Давайте вернемся и поменяем, а затем попробуем это в другом браузере. Попробуем в Firefox. Вы видите, что результат такой же. Теперь давайте сделаем другой паттерн, но сперва давайте избавимся от этого. Теперь мы создадим паттерн из видео. Копирую эти строки, а теперь я покажу вам, что мы сделаем. Вот здесь в документе у меня есть видео. Это элемент HTML5 video с ID, который указывает на этот источник, и он спрятан от просмотра.

Давайте взглянем на источник. Это вот это видео. Я отправляю его в проигрыватель. Давайте быстро на него взглянем. В общем, это видео, которое мы будем использовать как паттерн. Чтобы использовать видео как паттерн, запомните, что когда мы создаем паттерн, он берет тока текущую рамку воспроизведения. Сейчас нам нужно установить функцию timeout, чтобы захватить паттерн, имеющий несколько секунд в видео. Итак, я настраиваю таймаут на 3000 миллисекунд, или 3 секунды, а когда функция timeout завершит работу, моя результирующая функция получает из документа элемент video, получает canvas, получает контекст, а затем создает паттерн из элемента video и настраивает его как текущее свойство fillStyle для контекста.

А затем, когда я вызываю функцию fillRect, опять же, покрывая весь canvas, прямоугольник будет заполнен воспроизводящимися рисунками той рамки, что проигрывалась 3 секунды в видео. Сохраняем и давайте проиграем немного видео. Оно проигрывается автоматически. Мы переносим его в браузер. Ок, видео проигрывается. 1, 2, 3. Все верно! Итак, три секунды, вы видите, что мы захватили рамку на 3хсекундном индексе, и она была вставлена в весь canvas. И из-за воспроизведения рисунок воспроизводится по всей ширине.

В общем, вот так создавать паттерн из видео. Давайте вернемся и избавимся от этого паттерна. И последний пример. Я собираюсь создать паттерн из другого canvas, вот из этого. Копируем вот это и вставляем. Давайте я вам поясню, что происходит. Еще раз, мы смотрим в документ, и у нас есть два canvas.

Это canvas из примеров, который мы используем на протяжении данного курса, и в котором мы рисовали наши результаты. Также у меня есть другой canvas высотой и шириной в 25 пикселей. И я собираюсь нарисовать некоторый контент в этом canvas, а затем использовать его как паттерн. Я получаю ссылку на patcanvas и его контекст, устанавливаю strokeStyle на red, а lineWidth на 1. Я рисую 1-пиксельную линию с верхнего левого угла canvas вниз до нижнего правого.

У меня получается красная диагональная линия, затем я ее обрамляю. И именно поэтому мы действительно нарисовали линию. Теперь я это сделал. Я могу использовать этот canvas как паттерн. У меня здесь есть переменная, которая называется strokePat, и я говорю моему обычному canvas создать паттерн из patcanvas. Также я передаю repeat. Затем я устанавливаю strokeStyle - не fillStyle в этот раз - для strokePattern. lineWidth я устанавливаю на 25 пикселей, чтобы убедиться, что все будет показано. А затем я обрамляю прямоугольник по этим измерениям, и ширина обрамления составляет 25 пикселей.

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