Свойство globalCompositeOperation
Определяет как буду себя вести перекрывающиеся фигуры.
Синтаксис
globalCompositeOperation = type
type — одно из зарезервированных значений:
Заметка
В качестве иллюстрации используется пример с двумя фигурами, где синий квадрат рисуется первым.
- source-over (используется по умолчанию) — новое изображение рисуется по верх старого
- destination-over — новые фигуры рисуются под уже нарисованными
- source-in — отображается только та часть изображения, где фигуры пересекаются. Сверху новое изображение
- destination-in — отображается только та часть изображения, где фигуры пересекаются. Сверху старое изображение
- source-out — отображается только та часть нового изображения, которая не пересекается с другими фигурами
- destination-out — отображается только та часть предшествующего изображения, которая не пересекается с другими фигурами
- source-atop — у нового изображения отображается только та часть, которая пересекается с предшествующими фигурами
- destination-atop — у предшествующего изображения отображается (поверх) только та часть, которая пересекается с новой фигурой.
- lighter — место пересечения фигур изменяет цвет на тот, которые получается путем сложения цветов пересекающихся фигур.
- darker — место пересечения фигур изменяет цвет на тот, которые получается путем вычитания цветов пересекающихся фигур.
- xor — место пересечения фигур прозрачно.
- copy — отображается только новая фигура, все остальное удаляется.
Пример
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.globalCompositeOperation="destination-over";
Материалы
Показать комментарии