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

Видео урок: Композитинг в Canvas при помощи глобальной альфа

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

В этом разделе мы поговорим о методах композитинга canvas и глобальной альфа настройке. В контексте canvas есть настройка для того, что называется глобальной альфа, и это настройка прозрачности, которая влияет на все операции по рисованию, происходящими в canvas. Также есть настройка для того, что называется методом композитинга по умолчанию, и он влияет на то, как новый контент рисуется на поверхности canvas и как он потенциально влияет на контент, который уже есть здесь. Чтобы использовать глобальную альфа, вы просто устанавливаете свойство context.globalAlpha на значение от 0.0 до 1.0.

По умолчанию это значение равно 1.0, что обозначает полную непрозрачность. Также есть 12 методов композитинга, и вот я вам их демонстрирую. Первый из них называется source-over, и это метод по умолчанию. И он обозначает, что когда вы рисуете что-то новое, оно рисуется сверху того, что уже есть, и я думаю, такого поведения вы и ожидали. Каждый раз, как вы рисуете новую фигуру, вы просто ожидаете, что она появится на canvas, сверху того, что было нарисовано до этого. Следующий метод - это source-in. Вы видите, что рисование происходит только там, где уже существует контент canvas.

В данном случае зеленый прямоугольник будет показан только там, где находятся части синего прямоугольника. Source-out является полной противоположностью. Новый объект, зеленый прямоугольник, показан только там, где синего прямоугольника нет, там, где они не перекрываются. Метод source-atop похож на source-in, кроме того что он оставляет оригинальный контент на своем месте. Метод source-in оставляет только новый контент; source-atop оставляет старый контент и любое пересечение, где бы ни был новый контент.

Метод lighter занимается пересечением нового и старого контента, и рисует пиксели более бледного цвета от их нормального цвета. Операция xor или exclusive, или drawing, или метод compositing принимают новый контент пересекают его со старым контентом, а затем очищают область, где эти два контента перекрываются. Во втором ряду показаны другие операции. Метод destination-over похож на source-over, за исключением того, что новый контент рисуется, но он обрезается тем контентом, который уже здесь есть.

Также есть метод destination-in, который является своеобразной противоположностью source-in. В данном случае, только при двух перекрытиях рисуется новый контент, но новый контент остается вне, а старый сохраняется. При destination-out, это противоположность destination-in, там, где не перекрываются два контента, рисуется что-то новое, а весь остальной контент удаляется из canvas. Destination-atop является противоположностью source-atop. В данном случае сохраняется новый контент наряду с тем, что являлось старым контентом, если он пересекается с новым.

Метод darker заведует тем, чтобы пиксели были нарисованы более темным цветом. А copy обозначает просто рисование нового контента; все, что было до сих пор в canvas, удаляется, а остается только новый объект. Давайте перейдем к коду и посмотрим на все это в действии. Вот я в файле snippets, и здесь есть раздел Global Alpha. Давайте скопируем вот этот код. Во-первых, я копирую набор определений и вставляю их вот сюда.

Ок, вот я получил globalAlpha. Она начинается с 1.0, и это значение по умолчанию, но в целях демонстрации я ее немного поменяю. У меня есть массив прямоугольников. Итак, у меня есть прямоугольники 1, 2, 3, 4, 5, 6, 7, 8, прямоугольников, и все они определены в разных позициях. Также они перекрывают друг друга. Продолжим и запустим рисование. Копируем вот это. Цикл for пройдет по массиву прямоугольников и будет рисовать каждый прямоугольник в canvas.

На данный момент я комментирую эту строку. Мы видим, что прямоугольники нарисованы. Вот синий, а вот красный. Я рисую их вот здесь в canvas. Давайте уберем комментарий с этой строки. По мере прохождения по циклу globalAlpha уменьшается на 0.3. Давайте посмотрим на результат. Меняется коэффициент прозрачности, каждый раз по мере прохождения по циклу объекты становятся все светлее и светлее. Давайте посмотрим, работает ли это в других браузерах, открываем пример. Допустим, в Firefox. Все работает.

А теперь давайте посмотрим на некоторые операции композитинга. Вот в snippets есть пример Compositing. Копируем этот код и вставляем. Здесь я хочу отметить, что поскольку некоторые из этих операций по рисованию влияют на текущий контекст canvas, так что здесь я создал отдельные canvas для каждого примера. Итак, у меня есть два ряда по шесть canvas, каждый с параметрами 150 на 150, и мы сейчас рассмотрим все эти примеры.

Вот все методы композитинга - source-over, source-in и так далее. Все 12 находятся тут. У меня есть два прямоугольника, и каждый из этих прямоугольников будет нарисован в каждом из canvas. У меня есть переменная index, которая отслеживает метод композитинга, который мы сейчас используем, а также у нас есть цикл. Начинаем мы с 0 и проходим циклом по методам композитинга. Каждый canvas определяется именем canvas + целым числом.

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

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