Skip to content

Latest commit

 

History

History
320 lines (245 loc) · 16.1 KB

canvas-composite.md

File metadata and controls

320 lines (245 loc) · 16.1 KB
Raw
title layout categories pubDate description keywords
Композиция в Canvas
../../layouts/ArticleEntry.astro
javascript
canvas
2024-03-01
Композиция в Canvas
javascript, canvas

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

Использование свойства globalCompositeOperation

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

globalCompositeOperation = 'value';

Где value - одно из допустимых значений для режима композиции.

Примеры значений:

source-over Значение по умолчанию.
Исходное изображение накрывает целевое
source-atop Исходное изображение накладывается поверх целевого.
При этом часть исходного изображения, которая выходит
за границы целевого изображения, не отображается
source-in Исходное изображение отображается внутри целевого изображения.
При этом отображается только та часть исходного изображения,
которая находится в границах целевого изображения.
Само целевое изображение становится прозрачным
source-out Исходное изображение отображается вне границ целевого изображения.
При этом отображается только та часть исходного изображения,
которая находится за пределами целевого изображения.
Само целевое изображение становится прозрачным
destination-over Целевое изображение накрывает исходное
destination-atop

Целевое изображение накладывается поверх исходного.
При этом часть целевого изображения, которая выходит за границы
исходного изображения, не отображается
destination-in Целевое изображение отображается внутри исходного изображения.
При этом отображается только та часть целевого изображения,
которая находится в границах исходного изображения.
Само исходное изображение становится прозрачным
destination-out Целевое изображение отображается вне границ исходного изображения.
При этом отображается только та часть целевого изображения,
которая находится за пределами исходного изображения.
Само исходное изображение становится прозрачным
lighter Отображает исходное изображение + целевое изображение
copy Отображает исходное изображение.
Целевое изображение игнорируется
xor Исходное изображение комбинируется с целевым используя операцию исключающего ИЛИ

Наложение прямоугольников с режимом source-over

// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Применяем режим композиции
ctx.globalCompositeOperation = 'source-over';

// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

Результат: 

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/oNVadpg?default-tab=result" width="100%"></iframe>

Наложение прямоугольников с режимом source-atop

// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Применяем режим композиции
ctx.globalCompositeOperation = 'source-atop';

// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

Результат: 

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/PoLyegJ?default-tab=result" width="100%"></iframe>

Наложение прямоугольников с режимом source-in

// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Применяем режим композиции
ctx.globalCompositeOperation = 'source-in';

// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

Результат: 

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/MWxPGMx?default-tab=result" width="100%"></iframe>

Наложение прямоугольников с режимом source-out

// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Применяем режим композиции
ctx.globalCompositeOperation = 'source-out';

// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

Результат: 

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/ZEPqogZ?default-tab=result" width="100%"></iframe>

Наложение прямоугольников с режимом destination-over

// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Применяем режим композиции
ctx.globalCompositeOperation = 'destination-over';

// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

Результат: 

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/LYagrYN?default-tab=result" width="100%"></iframe>

Наложение прямоугольников с режимом destination-atop

// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Применяем режим композиции
ctx.globalCompositeOperation = 'destination-atop';

// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

Результат: 

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/RwdeJNg?default-tab=result" width="100%"></iframe>

Наложение прямоугольников с режимом destination-in

// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Применяем режим композиции
ctx.globalCompositeOperation = 'destination-in';

// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

Результат: 

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/RwdeJPg?default-tab=result" width="100%"></iframe>

Наложение прямоугольников с режимом destination-out

// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Применяем режим композиции
ctx.globalCompositeOperation = 'destination-out';

// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

Результат: 

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/jOJeKPQ?default-tab=result" width="100%"></iframe>

Наложение прямоугольников с режимом lighter

// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Применяем режим композиции
ctx.globalCompositeOperation = 'lighter';

// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

Результат: 

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/JjzmZKX?default-tab=result" width="100%"></iframe>

Наложение прямоугольников с режимом copy

// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Применяем режим композиции
ctx.globalCompositeOperation = 'copy';

// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

Результат: 

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/NWJOzrL?default-tab=result" width="100%"></iframe>

Наложение прямоугольников с режимом xor

// Рисуем первый прямоугольник (синий)
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 100);

// Применяем режим композиции
ctx.globalCompositeOperation = 'xor';

// Рисуем второй прямоугольник (красный) поверх первого
ctx.fillStyle = 'red';
ctx.fillRect(100, 100, 100, 100);

Результат: 

<iframe allowfullscreen="true" height="500" scrolling="no" src="https://codepen.io/Awilum/embed/XWGxYjJ?default-tab=result" width="100%"></iframe>