CanvasRenderingContext2D.globalCompositeOperation - як зображення малюється на існуюче зображення.
Синтаксис:
ctx.globalCompositeOperation;
Параметри:
ctx - об'єкт CanvasRenderingContext2D.
Опис:
globalCompositeOperation властивість об'єкту CanvasRenderingContext2D яка задає / повертає рядок який містить тип що встановлює як зображення будуть намальовані на існуючі зображення.
Можливі значення:
"source-over" - за замовчуванням. Початкове зображення (A) копіюється на цільове зображення (B).
"source-atop" - початкове зображення (A) копіюється поверх цільового зображення (B). Початкове зображення відображається, коли обидва зображення є непрозорими.
"source-in" - початкове зображення (A) копіюється в цільове зображення (B).
"source-out" - початкове зображення (A) копіюється з цільового зображення (B).
"destination-atop" - цільове зображення (B), копіюється поверх вихідного зображення (A). Початкове зображення відображається, коли вихідне зображення є непрозорим і цільве зображення є прозорим.
"destination-in" - цільове зображення (B) копіюється в вихідне зображення (A).
"destination-out" - цільове зображення (B) копіюється з вихідного зображення (A).
"destination-over" - цільове ображення (B) копіюється поверх вихідного зображення (A).
"lighter" - початкове зображення (A) копіюється плюс цільове зображення (B).Відображається сума початкового зображення і кінцевого зображення.
"copy" - початкове зображення (A) копіюється в цільове зображення (B).
"xor" - початкове зображення (А) в поєднанні з використанням XOR з цільовим зображенням (B).
тип:
прозорість A:
прозорість B:
Приклад:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(50, 50, 100, 50);
ctx.globalCompositeOperation="xor";
ctx.fillStyle="blue";
ctx.fillRect(20, 20, 100, 50);