Комментарии
Режимы наложения (blend modes) — способ объединения двух изображений с помощью специальных математических формул. В последнее время режимы наложения появились в HTML 2D Canvas.
Из блога Adobe: использование режимов наложения в HTML Canvas
Режимы наложения (blend modes) — способ объединения двух изображений с помощью специальных математических формул. В последнее время режимы наложения появились в HTML 2D Canvas.
Сибирикс
Сибирикс

Оригинал статьи

Можно подумать, что наложение ничем не отличается от прозрачности (opacity) — но в действительности результаты, достигаемые путем наложения, намного эффектнее, чем при использовании прозрачности. На практике наложение применяется в связке с прозрачностью.

Использование канвас-наложения

Чтобы использовать режим наложения в канвасе, выберите свойство globalCompositeOperation (принадлежит Context 2D Canvas), как показано здесь:

1. // Get the canvas element. "cvs" is the id of the html canvas element.

2. var canvas = document.getElementById("cvs");

3.

4. Get the Context object.

5. var context = canvas.getContext("2d");

6.

7. // Set the blending operation. 8. context.globalCompositeOperation = "multiply"; </code></pre>

После того, как этот блок выполнится, любые графически элементы, нарисованные на канвасе, будут смешиваться в режиме «умножения» (multiply). В первом примере, есть два исходных изображения: текстура воды во время дождя и изображения здания. Мы хотим получить эффект отражения здания в воде.

Check out this Pen!

Чтобы получить этот результат, сначала мы рисуем картинку с водой. Как только эта операция закончена, мы выбираем blendMode (режим наложения) канваса как Soft-light (мягкий свет).

Вторым шагом мы рисуем второе изображение. Нажмите на кнопку, чтобы увидеть превью эффекта. Как вы можете видеть, в результате получаем здание, отраженное в воде.

Последним шагом добавим еще один эффект: смешаем результат с линейным градиентом. Все, что нам нужно сделать — нарисовать градиент в канвасе, ведь операция наложения уже выполнена.

Можете просмотреть результат, еще раз нажав на кнопку. Когда мы закончили эти задачи, нам нужно исключить все последующие нарисованные в канвасе элементы из режима наложения. Это значит, что мы должны очистить оператор наложения, как здесь:

1. context.globalCompositeOperation = "source-over";

Следующий пример показывает применение самых распространенных режимов смешивания: Screen и Multiply (умножение).

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

Используйте кнопки WASD чтобы перемещаться по карте. Нажмите любую другую клавишу, чтобы увеличить интенсивность источника света.

Check out this Pen!

Здесь мы использовали режим смешивания Multiply, чтобы затенить карту — это было сделано путем создания поверх карты серого прямоугольника такого же размера и выбранного ранее режима смешивания.

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

Следующий пример показывает, как можно симулировать эффект тумана. Если вы наведете курсор на пример ниже, вы увидите туман, который добавится к исходному изображению.

Check out this Pen!

На изображение был наложен радиальный градиент, из белого в прозрачный, с использованием режима Soft-light. На самом деле, результат наложения иногда может быть слишком интенсивным. Для того, чтобы смягчить его, применяется наложение с прозрачностью. На примере выше перемещая ползунок, вы сможете управлять интенсивностью тумана (фактически управляя прозрачностью слоя с градиентом).

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

В следующем примере мы добились этого, просто нарисовав красный прямоугольник поверх всего экрана и включив режим наложения Overlay.

Check out this Pen!

Пример показывают богатые возможности режимов наложения. Вы можете кликать на радиобаттоны, чтобы переключаться между режимом Overlay и просто прозрачностью. Первый дает более приятную картинку. Последний пример решает такую проблему: у вас есть текстура и вы хотите нарисовать группу элементов и наложить всю группу на текстуру.

Если вы просто включите режим наложения и начнете рисовать объекты один за другим, то они будут смешиваться друг с другом, давая нежелательный результат.

Check out this Pen!

К счастью, у проблемы есть решение: в данном примере у нас есть футболка с текстурой ткани и схематическое изображение «робота». Робот сделан группой элементов. Чтобы смешать робота и текстуру футболки, нам нужно: Нарисовать робота на новом канвасе. Это достигается путем создания нового канвас-элемента.

Когда мы закончили рисовать робота, мы устанавливаем режим наложения нашего исходного канваса и рисуем новый канвас на оригинальном, как здесь:

1. // This creates a new canvas where we’ll draw the robot.

2. var layerCanvas = document.createElement("canvas");

3. var layerContext = layerCanvas.getContext("2d");

4.

5. // Actually draw the robot.

6. layerContext.fillStyle = "purple";

7. layerContext.beginPath();

8. layerContext.arc(50, 50, 40, 0, 2 * Math.PI);

9. layerContext.fill();

10. layerContext.fillStyle = "navy";

11. layerContext.fillRect(5, 35, 90, 30);

12. layerContext.fillStyle = "purple";

13. layerContext.fillRect(20, 40, 20, 20);

14. layerContext.fillRect(60, 40, 20, 20);

15.

16. // Set the blend mode of the original canvas

17. context.globalCompositeOperation = "overlay";

18.

19. // Blend the robot with the pattern.

20. // Drawing the newly created canvas on top of the original one.

21. context.drawImage(layerCanvas, 100, 70);

Заключение

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

Полезные ссылки: