Kompozycja kolorów na canvas
B – niebieski kwadrat – jest obiektem aktualnie istniejącym na canvas i jest ‘destination’ (miejscem przeznaczenia).
A – czerwone koło – jest obiektem, który jest dodawany i jest ‘source’ (obiektem źródłowym).
Domyślnym składaniem jest source-atop.
| Operacja | Opis |
|---|---|
| copy | Wyświetla tylko A. |
| destination-atop | Wyświetla B tylko w miejscach, gdzie A i B się nakładają. Wyświetla A w miejscach gdzie A i B się nie nakładają. |
| destination-in | Wyświetla B tylko w obszarze, w którym A i B nakładają się. A nie jest wyświetlane. |
| destination-out | Wyświetla B tylko w obszarze, w którym A i B nie nakładają się. A nie jest wyświetlane. |
| destination-over | Wyświetla całe B, A A tylko w miejscy, gdzie A i B nie nakładają się. |
| lighter | W obszarach, gdzie A i B nakładają się wyświetla sumę A i B. Tam gdzie się nie nakładają wyświetla A i B normalnie. |
| darker | W obszarach, gdzie A i B nakładają się wyświetla różnicę A i B. Tam gdzie się nie nakładają wyświetla A i B normalnie. |
| source-atop | Wyświetla A tam gdzie A i B nakładają się, a B tam gdzie A i B nie nakładają się. |
| source-in | Wyświetla A tylko w obszarze gdzie A i B nakładają się. B nie jest wyświetlane. |
| source-out | Wyświetla A tylko w obszarze, gdzie A i B nie nakładają się. B nie jest wyświetlane. |
| source-over | Wyświetla całe A, a B tylko w miejscach, gdzie A i B nie nakładają się. |
| xor | Wyświetla A i B w obszarach, w których nie nakładają się. Nic nie wyświetla w miejscach, gdzie A i B nakładają się. |
Listing
var compositeTypes = [
'source-over','source-in','source-out','source-atop',
'destination-over','destination-in','destination-out',
'destination-atop','lighter','darker','copy','xor'
];
function drawShape() {
for (i=0;i<compositeTypes.length;i++) {
var label = document.createTextNode(compositeTypes[i]);
document.getElementById('lab'+i).appendChild(label);
var ctx = document.getElementById('tut'+i).getContext('2d');
// draw rectangle
ctx.fillStyle = "#FF3366";
ctx.fillRect(15,15,70,70);
// set composite property
ctx.globalCompositeOperation = compositeTypes[i];
// draw circle
ctx.fillStyle = "#0066FF";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
}
}