globalCompositeOperation

Автор: Евгений Рыжков Дата публикации: 17.10.2011
Последнее обновление: 01.01.1970

Определяет как буду себя вести перекрывающиеся фигуры.

Синтаксис

globalCompositeOperation = type

type — одно из зарезервированных значений:

Заметка

В качестве иллюстрации используется пример с двумя фигурами, где синий квадрат рисуется первым.

  • source-over (используется по умолчанию) — новое изображение рисуется по верх старого
    source-over
  • destination-over — новые фигуры рисуются под уже нарисованными
    destination-over
  • source-in — отображается только та часть изображения, где фигуры пересекаются. Сверху новое изображение
    source-in
  • destination-in — отображается только та часть изображения, где фигуры пересекаются. Сверху старое изображение
    destination-in
  • source-out — отображается только та часть нового изображения, которая не пересекается с другими фигурами
    source-out
  • destination-out — отображается только та часть предшествующего изображения, которая не пересекается с другими фигурами
    destination-out
  • source-atop — у нового изображения отображается только та часть, которая пересекается с предшествующими фигурами
    source-atop
  • destination-atop — у предшествующего изображения отображается (поверх) только та часть, которая пересекается с новой фигурой.
    destination-atop
  • lighter — место пересечения фигур изменяет цвет на тот, которые получается путем сложения цветов пересекающихся фигур.
    lighter
  • darker — место пересечения фигур изменяет цвет на тот, которые получается путем вычитания цветов пересекающихся фигур.
    darker
  • xor — место пересечения фигур прозрачно.
    xor
  • copy — отображается только новая фигура, все остальное удаляется.
    copy

Пример

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.globalCompositeOperation="destination-over";

Материалы