Управление наложением графики

Управление наложением графики

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

Для управления наложением графики предусмотрено свойство

globalCompositeOperation.

Вот его допустимые значения:

— "source-over" — новая фигура накладывается на старую, перекрывая ее (значение по умолчанию);

— "destination-over" — новая фигура перекрывается старой;

— "source-in" — отображается только та часть новой фигуры, которая накладывается на старую. Остальные части новой и старой фигур не выводятся;

— "destination-in" — отображается только та часть старой фигуры, на которую накладывается новая. Остальные части новой и старой фигур не выводятся;

— "source-out" — отображается только та часть новой фигуры, которая не накладывается на старую. Остальные части новой фигуры и вся старая фигура не выводятся;

— "destination-out" — отображается только та часть старой фигуры, на которую не накладывается новая. Остальные части новой фигуры и вся старая фигура не выводятся;

— "source-atop" — отображается только та часть новой фигуры, которая накладывается на старую; остальная часть новой фигуры не выводится. Старая фигура выводится целиком и находится ниже новой;

— "destination-atop" — отображается только та часть старой фигуры, которая накладывается на новую; остальная часть старой фигуры не выводится. Новая фигура выводится целиком и находится ниже старой;

— "lighter" — цвета накладывающихся частей старой и новой фигур складываются, результирующий цвет получается более светлым, окрашиваются накладывающиеся части фигур;

— "darker" — цвета накладывающихся частей старой и новой фигур вычитаются, в полученный цвет, который получается более темным, окрашиваются накладывающиеся части фигур;

— "xor" — отображаются только те части старой и новой фигур, которые не накладываются друг на друга;

— "copy" — выводится только новая фигура; все старые фигуры удаляются с канвы.

Заданный нами способ наложения графики действует только для графики, которую мы нарисуем после этого. На уже нарисованную графику он влияния не оказывает.

Листинг 22.15 иллюстрирует пример.

Листинг 22.15

ctxCanvas.fillStyle = "blue";

ctxCanvas.fillRect(0, 50, 400, 200);

ctxCanvas.fillStyle = "red";

ctxCanvas.globalCompositeOperation = "source-over";

ctxCanvas.fillRect(100, 0, 200, 300);

Web-сценарий из листинга 22.15 рисует два накладывающихся прямоугольника разных цветов и позволит изучить поведение канвы при разных значениях свойства globalCompositeOperation. Изменяем значение этого свойства, перезагружаем Web-страницу нажатием клавиши <F5> и смотрим, что получится.