Свойство globalCompositeOperation

Обсуждая пути, мы сказали, что существует свойство, определяющее, каким образом фигура выводится на холст и комбинируется с фигурами, созданными ранее. Это свойство называется globalCompositeOperation, а его значение по умолчанию — source-over, это означает, что новая фигура визуализируется поверх уже добавленных на холст. Можно использовать 11 других значений данного свойства:

— source-in. Визуализируется только та часть новой фигуры, которая перекрывает предыдущую фигуру. Остальные фрагменты новой и предыдущей фигур становятся прозрачными;

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

— source-atop. Визуализируется только та часть новой фигуры, которая перекрывает предыдущую фигуру. Предыдущая фигура сохраняется целиком, но остальные фрагменты новой фигуры становятся прозрачными;

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

— xor. Визуализируются обе фигуры, но перекрывающиеся фрагменты становятся прозрачными;

— destination-over. Это прямая противоположность значению по умолчанию. Новые фигуры визуализируются позади фигур, уже добавленных на холст;

— destination-in. Сохраняются только те фрагменты существующих фигур, которые перекрываются новой фигурой. Все остальное, включая новую фигуру, становится прозрачным;

— destination-out. Сохраняются только те фрагменты существующих фигур, которые не перекрываются новой фигурой. Все остальное, включая новую фигуру, становится прозрачным;

— destination-atop. Существующие фигуры и новая фигура становятся прозрачными, за исключением тех фрагментов, где они перекрываются;

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

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

Листинг 7.21. Проверка свойства globalCompositeOperation

Function initiate(){

Var elem=document. getElementById(‘canvas’); canvas=elem. getContext(‘2d’);

Canvas. fillStyle="#990000";

Canvas. globalCompositeOperation="destination-atop";

Canvas. fillStyle="#AAAAFF"; canvas. font="bold 80px verdana, sans-serif"; canvas. textAlign="center"; canvas. textBaseline="middle"; canvas. fillText("TEST",250,110);

}

Window. addEventListener("load", initiate, false);

Только визуальная иллюстрация всех возможных значений свойства globalCompositeOperation поможет вам понять, как они работают. Для этого мы подготовили код в листинге 7.21. При его выполнении в центре холста создается красный прямоугольник, но благодаря значению destination-atop мы видим только ту часть прямоугольника, поверх которой выводится текст.

Замените значение destination-atop любым другим значением данного свойства и проверьте результат в своем браузере. Протестируйте код в разных браузерах.