Можно подумать, что наложение ничем не отличается от прозрачности (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 чтобы перемещаться по карте. Нажмите любую другую клавишу, чтобы увеличить интенсивность источника света.
Здесь мы использовали режим смешивания Multiply, чтобы затенить карту — это было сделано путем создания поверх карты серого прямоугольника такого же размера и выбранного ранее режима смешивания.
Вторым шагом мы используем наложение, чтобы симулировать свет, исходящий от персонажа в подземелье. Для этого мы используем радиальный градиент, от желтого к прозрачному. Этот градиент накладывается на задний план в режиме Screen, так достигается эффект факела.
Следующий пример показывает, как можно симулировать эффект тумана. Если вы наведете курсор на пример ниже, вы увидите туман, который добавится к исходному изображению.
На изображение был наложен радиальный градиент, из белого в прозрачный, с использованием режима Soft-light. На самом деле, результат наложения иногда может быть слишком интенсивным. Для того, чтобы смягчить его, применяется наложение с прозрачностью. На примере выше перемещая ползунок, вы сможете управлять интенсивностью тумана (фактически управляя прозрачностью слоя с градиентом).
Вот другой эффект, который может быть достигнут с помощью режимов наложения канваса. Допустим, вы разрабатываете игру. Когда у персонажа остается мало хитпойнтов, игровой экран начинает мигать красным «тревожным» сигналом.
В следующем примере мы добились этого, просто нарисовав красный прямоугольник поверх всего экрана и включив режим наложения Overlay.
Пример показывают богатые возможности режимов наложения. Вы можете кликать на радиобаттоны, чтобы переключаться между режимом Overlay и просто прозрачностью. Первый дает более приятную картинку. Последний пример решает такую проблему: у вас есть текстура и вы хотите нарисовать группу элементов и наложить всю группу на текстуру.
Если вы просто включите режим наложения и начнете рисовать объекты один за другим, то они будут смешиваться друг с другом, давая нежелательный результат.
К счастью, у проблемы есть решение: в данном примере у нас есть футболка с текстурой ткани и схематическое изображение «робота». Робот сделан группой элементов. Чтобы смешать робота и текстуру футболки, нам нужно: Нарисовать робота на новом канвасе. Это достигается путем создания нового канвас-элемента.
Когда мы закончили рисовать робота, мы устанавливаем режим наложения нашего исходного канваса и рисуем новый канвас на оригинальном, как здесь:
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);
Заключение
Большинство из показанных приемов могут с успехом применяться, например, в разработке игр. Или для создания интересных эффектов на веб-страницах. А преимущества режима наложения перед простой прозрачностью очевидны.