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